diff --git a/public/computer/OsWebseite.vue b/public/computer/OsWebseite.vue
new file mode 100644
index 0000000..4a85786
--- /dev/null
+++ b/public/computer/OsWebseite.vue
@@ -0,0 +1,376 @@
+<script setup lang="js">
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
+
+const code = ref("");
+const loggedIn = ref(false);
+const error = ref("");
+const inputRef = ref(null);
+
+function cleanCode(event) {
+  code.value = event.target.value.replace(/\D/g, "").slice(0, 4);
+  error.value = "";
+}
+
+function login() {
+  if (code.value === "1337") {
+    loggedIn.value = true;
+    error.value = "";
+    return;
+  }
+
+  code.value = "";
+  error.value = "ACCESS DENIED";
+  nextTick(() => inputRef.value?.focus());
+}
+
+function logout() {
+  loggedIn.value = false;
+  code.value = "";
+  error.value = "";
+  nextTick(() => inputRef.value?.focus());
+}
+
+function leaveComputer() {
+  if (window.parent === window) return;
+
+  window.parent.postMessage({ type: "leave-computer" }, window.location.origin);
+}
+
+function onKeydown(event) {
+  if (event.key === "Escape") leaveComputer();
+}
+
+onMounted(() => {
+  window.addEventListener("keydown", onKeydown);
+  document.documentElement.addEventListener("mouseleave", leaveComputer);
+  inputRef.value?.focus();
+});
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", onKeydown);
+  document.documentElement.removeEventListener("mouseleave", leaveComputer);
+});
+</script>
+
+<template>
+  <main class="page">
+    <header>
+      <b>FEDERAL RECORDS SYSTEM</b>
+      <span>SECURE SERVER 04</span>
+    </header>
+
+    <section v-if="!loggedIn" class="login-box">
+      <h1>Restricted Access</h1>
+      <p>This system is for authorized personnel only.</p>
+
+      <form @submit.prevent="login">
+        <label for="code">Access Code:</label>
+        <input
+          id="code"
+          ref="inputRef"
+          :value="code"
+          type="password"
+          inputmode="numeric"
+          maxlength="4"
+          autocomplete="off"
+          @input="cleanCode"
+        />
+        <button type="submit">LOGIN</button>
+      </form>
+
+      <p v-if="error" class="error" role="alert">{{ error }}</p>
+      <p class="help">Press ESC to leave terminal.</p>
+    </section>
+
+    <section v-else class="records">
+      <nav>
+        <b>RECORD DATABASE</b>
+        <button type="button" @click="logout">LOG OUT</button>
+      </nav>
+
+      <h1>Case File 04-1337</h1>
+
+      <table>
+        <tbody>
+          <tr>
+            <th>Status</th>
+            <td>OPEN</td>
+          </tr>
+          <tr>
+            <th>Classification</th>
+            <td>RESTRICTED</td>
+          </tr>
+          <tr>
+            <th>Subject</th>
+            <td>UNKNOWN</td>
+          </tr>
+          <tr>
+            <th>Last activity</th>
+            <td>03:17 / SECTOR 12</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="note">
+        <b>REPORT</b>
+        <p>
+          An unidentified signal was recorded near the archive terminal.
+          Investigation remains active. No further action authorized.
+        </p>
+      </div>
+
+      <footer>FICTIONAL ARCHIVE SYSTEM // LOCAL TERMINAL</footer>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+:global(*) {
+  box-sizing: border-box;
+}
+
+:global(html),
+:global(body),
+:global(#app) {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: #000;
+}
+
+:global(body) {
+  font-family: Verdana, Arial, sans-serif;
+}
+
+.page {
+  width: 100%;
+  height: 100dvh;
+  overflow: hidden;
+  color: #b7c2b9;
+  background: #000;
+  font-size: clamp(12px, 1.4vw, 16px);
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 54px;
+  padding: 0 22px;
+  border-bottom: 1px solid #526056;
+  color: #d4ddd6;
+  background: #111;
+  font-family: "Courier New", monospace;
+}
+
+header span {
+  color: #718076;
+  font-size: 0.75em;
+}
+
+.login-box {
+  width: min(430px, calc(100% - 36px));
+  margin: clamp(40px, 14vh, 110px) auto 0;
+  padding: 22px;
+  border: 1px solid #58635b;
+  background: #080a08;
+}
+
+h1 {
+  margin: 0 0 18px;
+  color: #d6ddd7;
+  font:
+    bold 1.25em "Courier New",
+    monospace;
+}
+
+p {
+  line-height: 1.5;
+}
+
+form {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 8px;
+  margin-top: 24px;
+}
+
+label {
+  white-space: nowrap;
+}
+
+input,
+button {
+  border: 1px solid #5c685e;
+  border-radius: 0;
+  font: inherit;
+}
+
+input {
+  min-width: 0;
+  padding: 7px;
+  outline: none;
+  color: #9ee6ad;
+  background: #000;
+}
+
+input:focus {
+  border-color: #9ee6ad;
+}
+
+button {
+  padding: 7px 12px;
+  color: #d1d8d2;
+  background: #242924;
+  cursor: pointer;
+}
+
+button:hover,
+button:focus-visible {
+  color: #fff;
+  background: #343b35;
+}
+
+.error {
+  margin: 15px 0 0;
+  color: #d76b62;
+  font-family: "Courier New", monospace;
+}
+
+.help {
+  margin: 22px 0 0;
+  color: #667068;
+  font-size: 0.75em;
+}
+
+.records {
+  width: min(760px, calc(100% - 36px));
+  height: calc(100dvh - 82px);
+  margin: 18px auto 0;
+  overflow: hidden;
+  border: 1px solid #4d574f;
+  background: #060706;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 42px;
+  padding: 0 14px;
+  border-bottom: 1px solid #4d574f;
+  color: #9ee6ad;
+  background: #121512;
+  font-family: "Courier New", monospace;
+}
+
+nav button {
+  padding: 4px 9px;
+  font-size: 0.75em;
+}
+
+.records > h1,
+.records > table,
+.records > .note {
+  margin-right: 20px;
+  margin-left: 20px;
+}
+
+.records > h1 {
+  margin-top: 20px;
+}
+
+table {
+  width: calc(100% - 40px);
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 8px 10px;
+  border: 1px solid #3e473f;
+  text-align: left;
+}
+
+th {
+  width: 34%;
+  color: #78847a;
+  background: #0c0f0c;
+  font-weight: normal;
+}
+
+td {
+  color: #a7d9b0;
+  font-family: "Courier New", monospace;
+}
+
+.note {
+  margin-top: 20px;
+  padding: 14px;
+  border: 1px solid #3e473f;
+}
+
+.note b {
+  color: #78847a;
+  font-size: 0.8em;
+}
+
+.note p {
+  margin: 8px 0 0;
+}
+
+footer {
+  margin: 22px 20px 0;
+  color: #566058;
+  font:
+    0.7em "Courier New",
+    monospace;
+  text-align: right;
+}
+
+@media (max-width: 500px), (max-height: 500px) {
+  header {
+    height: 44px;
+    padding: 0 12px;
+  }
+
+  .login-box {
+    margin-top: 24px;
+    padding: 16px;
+  }
+
+  form {
+    grid-template-columns: 1fr auto;
+  }
+
+  form label {
+    grid-column: 1 / -1;
+  }
+
+  .records {
+    height: calc(100dvh - 58px);
+    margin-top: 7px;
+  }
+
+  .records > h1 {
+    margin-top: 12px;
+    margin-bottom: 10px;
+  }
+
+  th,
+  td {
+    padding: 5px 7px;
+  }
+
+  .note {
+    margin-top: 10px;
+    padding: 8px;
+  }
+
+  footer {
+    display: none;
+  }
+}
+</style>
diff --git a/public/models/book_shelf-v1.glb b/public/models/book_shelf-v1.glb
new file mode 100644
index 0000000..6a54fd1
Binary files /dev/null and b/public/models/book_shelf-v1.glb differ
diff --git a/public/models/book_shelf_pc_draco-v1.glb b/public/models/book_shelf_pc_draco-v1.glb
deleted file mode 100644
index 3aaea83..0000000
Binary files a/public/models/book_shelf_pc_draco-v1.glb and /dev/null differ
diff --git a/src/components/big/MonitorModel.vue b/src/components/big/MonitorModel.vue
index a76dbac..84006fb 100644
--- a/src/components/big/MonitorModel.vue
+++ b/src/components/big/MonitorModel.vue
@@ -111,8 +111,6 @@ function loadModel() {
       model.position.set(0, 0, 0);
       scene.add(model);
       gsapCtx = scrollCamreaGsap(center);
-
-      document.title = "Model geladen";
     },
     (progress) => {
       const percent = ((progress.loaded / progress.total) * 100).toFixed(1);
diff --git a/src/components/big/PcBooks.vue b/src/components/big/PcBooks.vue
index ee8f85d..68c1216 100644
--- a/src/components/big/PcBooks.vue
+++ b/src/components/big/PcBooks.vue
@@ -3,8 +3,6 @@ import { onMounted, onUnmounted, ref } from "vue";
 import * as THREE from "three";
 import gsap from "gsap";
 
-import OsWebseite from "../computer/OsWebseite.vue";
-
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
@@ -38,6 +36,9 @@ let iframeObject;
 
 let computerMode = false;
 let cameraAnimation = null;
+let iframeInteractionReady = false;
+let iframePointerWasInside = false;
+let iframeReadyTimer = null;
 
 const originalCameraPosition = new THREE.Vector3();
 const originalControlsTarget = new THREE.Vector3();
@@ -75,14 +76,14 @@ function initThree(canvas, cssContainer) {
 
   cssContainer.appendChild(cssRenderer.domElement);
 
-  // scene.add(new THREE.AmbientLight(0xffffff, 0.02));
+  // scene.add(new THREE.AmbientLight(0xffffff, 0.102));
 
   loadModel();
   gsap.ticker.add(render);
 }
 
 function loadModel() {
-  const modelUrl = "/models/book_shelf_pc_draco-v1.glb";
+  const modelUrl = "/models/book_shelf-v1.glb";
 
   const dracoLoader = new DRACOLoader();
   dracoLoader.setDecoderPath("/draco/");
@@ -122,7 +123,7 @@ function loadModel() {
       // camera.lookAt(center);
       camera.position.set(
         center.x,
-        center.y + distance * 0.35, // etwas von oben
+        center.y + distance * 0.35,
         center.z + distance,
       );
 
@@ -147,8 +148,6 @@ function loadModel() {
 
         bulb.add(pointLight);
       }
-
-      document.title = "Model geladen";
     },
     (progress) => {
       if (progress.total) {
@@ -186,6 +185,9 @@ function enterComputerMode() {
   if (!screenMesh || computerMode) return;
 
   computerMode = true;
+  iframeInteractionReady = false;
+  iframePointerWasInside = false;
+  window.clearTimeout(iframeReadyTimer);
 
   originalCameraPosition.copy(camera.position);
   originalControlsTarget.copy(controls.target);
@@ -198,7 +200,7 @@ function enterComputerMode() {
   const screenQuaternion = new THREE.Quaternion();
   screenMesh.getWorldQuaternion(screenQuaternion);
 
-  const cameraOffset = new THREE.Vector3(0, 0.3, 2.9);
+  const cameraOffset = new THREE.Vector3(0, 2, 0);
 
   cameraOffset.applyQuaternion(screenQuaternion);
 
@@ -216,10 +218,15 @@ function enterComputerMode() {
       iframe.focus();
 
       try {
-        iframe.contentDocument?.querySelector("#password")?.focus();
+        iframe.contentDocument?.querySelector("input")?.focus();
       } catch (error) {
         console.warn("iframe konnte nicht fokussiert werden", error);
       }
+
+      // Verhindert, dass ein Lade-/Layout-event sofort wieder herauszoomt.
+      iframeReadyTimer = window.setTimeout(() => {
+        iframeInteractionReady = true;
+      }, 300);
     },
   });
 
@@ -247,16 +254,20 @@ function enterComputerMode() {
     0,
   );
 }
+
 function leaveComputerMode() {
   if (!computerMode) return;
 
   computerMode = false;
+  iframeInteractionReady = false;
+  iframePointerWasInside = false;
+  window.clearTimeout(iframeReadyTimer);
 
   iframe.style.pointerEvents = "none";
   iframe.blur();
 
-  // Beim Herauszoomen wieder ausschließlich das GLTF-Display zeigen.
-  iframeObject.visible = false;
+  // Noch sichtbar lassen während der Kamera-Animation
+  iframeObject.visible = true;
   screenMesh.visible = true;
 
   cameraAnimation?.kill();
@@ -268,6 +279,9 @@ function leaveComputerMode() {
     onComplete() {
       controls.enabled = true;
       controls.update();
+
+      // Erst nach dem Herauszoomen ausblenden
+      iframeObject.visible = false;
     },
   });
 
@@ -295,11 +309,13 @@ function leaveComputerMode() {
     0,
   );
 }
+
 function onIframeMessage(event) {
   if (event.source !== iframe?.contentWindow) return;
   if (event.origin !== window.location.origin) return;
 
   if (event.data?.type === "leave-computer") {
+    if (!computerMode || !iframeInteractionReady) return;
     leaveComputerMode();
   }
 }
@@ -336,8 +352,8 @@ function onResize() {
 }
 
 function createComputerScreen(mesh) {
-  const iframeWidth = 1280;
-  const iframeHeight = 720;
+  const iframeWidth = 1480;
+  const iframeHeight = 920;
 
   const container = document.createElement("div");
 
@@ -347,10 +363,8 @@ function createComputerScreen(mesh) {
   container.style.overflow = "hidden";
 
   iframe = document.createElement("iframe");
-  const parentOrigin = JSON.stringify(window.location.origin);
 
-  // Eigenständige Oberfläche: keine zusätzliche Vue-Route/HTML-Datei nötig.
-  iframe.src = "/computer";
+  iframe.src = `${window.location.origin}/motion/computer`;
   iframe.title = "Computer";
   iframe.tabIndex = 0;
 
@@ -361,15 +375,24 @@ function createComputerScreen(mesh) {
 
   container.appendChild(iframe);
 
-  // Zusätzlicher Fallback am iframe-Element selbst.
-  iframe.addEventListener("mouseleave", () => {
-    if (computerMode) leaveComputerMode();
+  // Erst ein echtes Betreten und anschließendes Verlassen schließt den Modus.
+  iframe.addEventListener("pointerenter", () => {
+    if (!computerMode) return;
+    iframePointerWasInside = true;
+  });
+
+  iframe.addEventListener("pointerleave", () => {
+    if (!computerMode || !iframeInteractionReady || !iframePointerWasInside) {
+      return;
+    }
+
+    leaveComputerMode();
   });
 
   iframe.addEventListener("load", () => {
     try {
       iframe.contentWindow.addEventListener("keydown", (event) => {
-        if (event.key === "Escape") {
+        if (event.key === "Escape" && computerMode && iframeInteractionReady) {
           leaveComputerMode();
         }
       });
@@ -386,7 +409,6 @@ function createComputerScreen(mesh) {
 
   updateIframeTransform(mesh, iframeWidth, iframeHeight);
 }
-
 function updateIframeTransform(mesh, iframeWidth, iframeHeight) {
   mesh.updateWorldMatrix(true, false);
 
@@ -406,19 +428,34 @@ function updateIframeTransform(mesh, iframeWidth, iframeHeight) {
   iframeObject.position.copy(worldPosition);
   iframeObject.quaternion.copy(worldQuaternion);
 
+  /*
+   * Korrektur für das neue Screen-Mesh.
+   * Bei falscher Richtung -90 durch +90 ersetzen.
+   */
+  iframeObject.rotateX(THREE.MathUtils.degToRad(-90));
+  iframeObject.rotateZ(THREE.MathUtils.degToRad(-90));
+  iframeObject.translateX(-0.04);
+  iframeObject.translateY(+0.013);
+  iframeObject.translateZ(-0.1);
+
+  const screenWidth = Math.abs(meshSize.x * worldScale.x) + 0.03;
+
+  const screenHeight = Math.abs(meshSize.y * worldScale.y) + 0.61;
+
   iframeObject.scale.set(
-    (meshSize.x * worldScale.x + 0.03) / iframeWidth,
-    (meshSize.y * worldScale.y + 0.03) / iframeHeight,
+    screenWidth / iframeWidth,
+    screenHeight / iframeHeight,
     1,
   );
 
-  // Etwas vor den eigentlichen Bildschirm setzen,
-  // damit es nicht genau auf derselben Ebene liegt.
-  const normal = new THREE.Vector3(0, 0, -1.4)
-    .applyQuaternion(worldQuaternion)
+  /*
+   * Vorderseite nach der Korrekturrotation berechnen.
+   */
+  const iframeNormal = new THREE.Vector3(0, 0, 1)
+    .applyQuaternion(iframeObject.quaternion)
     .normalize();
 
-  iframeObject.position.addScaledVector(normal, -0.2);
+  iframeObject.position.addScaledVector(iframeNormal, 0.1);
 }
 
 let resizeObserver;
@@ -460,6 +497,7 @@ onUnmounted(() => {
 
   resizeObserver?.disconnect();
   cameraAnimation?.kill();
+  window.clearTimeout(iframeReadyTimer);
 
   controls?.dispose();
   renderer?.dispose();
diff --git a/src/components/computer/OsWebseite.vue b/src/components/computer/OsWebseite.vue
index 4a85786..a4fa46d 100644
--- a/src/components/computer/OsWebseite.vue
+++ b/src/components/computer/OsWebseite.vue
@@ -1,10 +1,23 @@
 <script setup lang="js">
-import { nextTick, onMounted, onUnmounted, ref } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
 
 const code = ref("");
 const loggedIn = ref(false);
 const error = ref("");
 const inputRef = ref(null);
+const desktopRef = ref(null);
+const caseWindowRef = ref(null);
+const caseOpen = ref(false);
+const currentTime = ref("");
+
+const windowPosition = reactive({ x: 90, y: 48 });
+const drag = { active: false, offsetX: 0, offsetY: 0 };
+
+let clockTimer;
+
+const caseWindowStyle = computed(() => ({
+  transform: `translate3d(${windowPosition.x}px, ${windowPosition.y}px, 0)`,
+}));
 
 function cleanCode(event) {
   code.value = event.target.value.replace(/\D/g, "").slice(0, 4);
@@ -12,24 +25,96 @@ function cleanCode(event) {
 }
 
 function login() {
-  if (code.value === "1337") {
-    loggedIn.value = true;
-    error.value = "";
+  if (code.value !== "1337") {
+    code.value = "";
+    error.value = "ACCESS DENIED";
+    nextTick(() => inputRef.value?.focus());
     return;
   }
 
-  code.value = "";
-  error.value = "ACCESS DENIED";
-  nextTick(() => inputRef.value?.focus());
+  loggedIn.value = true;
+  error.value = "";
 }
 
 function logout() {
+  caseOpen.value = false;
   loggedIn.value = false;
   code.value = "";
   error.value = "";
   nextTick(() => inputRef.value?.focus());
 }
 
+function openCase() {
+  caseOpen.value = true;
+
+  nextTick(() => {
+    const desktop = desktopRef.value;
+    const caseWindow = caseWindowRef.value;
+    if (!desktop || !caseWindow) return;
+
+    windowPosition.x = Math.max(
+      8,
+      Math.round((desktop.clientWidth - caseWindow.offsetWidth) / 2),
+    );
+    windowPosition.y = Math.max(
+      8,
+      Math.round((desktop.clientHeight - caseWindow.offsetHeight) / 2),
+    );
+    caseWindow.focus();
+  });
+}
+
+function closeCase() {
+  caseOpen.value = false;
+  drag.active = false;
+}
+
+function startDrag(event) {
+  if (event.button !== 0) return;
+
+  const caseWindow = caseWindowRef.value;
+  if (!caseWindow) return;
+
+  drag.active = true;
+  drag.offsetX = event.clientX - caseWindow.getBoundingClientRect().left;
+  drag.offsetY = event.clientY - caseWindow.getBoundingClientRect().top;
+  event.currentTarget.setPointerCapture?.(event.pointerId);
+  event.preventDefault();
+}
+
+function moveDrag(event) {
+  if (!drag.active) return;
+
+  const desktop = desktopRef.value;
+  const caseWindow = caseWindowRef.value;
+  if (!desktop || !caseWindow) return;
+
+  const desktopRect = desktop.getBoundingClientRect();
+  const maxX = Math.max(0, desktop.clientWidth - caseWindow.offsetWidth);
+  const maxY = Math.max(0, desktop.clientHeight - caseWindow.offsetHeight);
+
+  windowPosition.x = Math.min(
+    maxX,
+    Math.max(0, event.clientX - desktopRect.left - drag.offsetX),
+  );
+  windowPosition.y = Math.min(
+    maxY,
+    Math.max(0, event.clientY - desktopRect.top - drag.offsetY),
+  );
+}
+
+function stopDrag() {
+  drag.active = false;
+}
+
+function updateClock() {
+  currentTime.value = new Intl.DateTimeFormat("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  }).format(new Date());
+}
+
 function leaveComputer() {
   if (window.parent === window) return;
 
@@ -41,97 +126,251 @@ function onKeydown(event) {
 }
 
 onMounted(() => {
+  updateClock();
+  clockTimer = window.setInterval(updateClock, 1000);
   window.addEventListener("keydown", onKeydown);
-  document.documentElement.addEventListener("mouseleave", leaveComputer);
+  window.addEventListener("pointermove", moveDrag);
+  window.addEventListener("pointerup", stopDrag);
+  window.addEventListener("pointercancel", stopDrag);
   inputRef.value?.focus();
 });
 
 onUnmounted(() => {
+  window.clearInterval(clockTimer);
   window.removeEventListener("keydown", onKeydown);
-  document.documentElement.removeEventListener("mouseleave", leaveComputer);
+  window.removeEventListener("pointermove", moveDrag);
+  window.removeEventListener("pointerup", stopDrag);
+  window.removeEventListener("pointercancel", stopDrag);
 });
 </script>
 
 <template>
   <main class="page">
-    <header>
-      <b>FEDERAL RECORDS SYSTEM</b>
-      <span>SECURE SERVER 04</span>
-    </header>
+    <section v-if="!loggedIn" class="login-screen">
+      <div class="login-box">
+        <div class="login-brand">
+          <span class="seal">POLICE</span>
+          <div>
+            <b>FEDERAL BUREAU OF INVESTIGATION</b>
+            <small>INTERNAL RECORDS NETWORK</small>
+          </div>
+        </div>
 
-    <section v-if="!loggedIn" class="login-box">
-      <h1>Restricted Access</h1>
-      <p>This system is for authorized personnel only.</p>
+        <h1>Restricted System</h1>
+        <p>Enter your assigned access code.</p>
 
-      <form @submit.prevent="login">
-        <label for="code">Access Code:</label>
-        <input
-          id="code"
-          ref="inputRef"
-          :value="code"
-          type="password"
-          inputmode="numeric"
-          maxlength="4"
-          autocomplete="off"
-          @input="cleanCode"
-        />
-        <button type="submit">LOGIN</button>
-      </form>
+        <form @submit.prevent="login">
+          <label for="access-code">ACCESS CODE</label>
+          <input
+            id="access-code"
+            ref="inputRef"
+            :value="code"
+            type="password"
+            inputmode="numeric"
+            maxlength="4"
+            autocomplete="off"
+            @input="cleanCode"
+          />
+          <button type="submit">LOG IN</button>
+        </form>
 
-      <p v-if="error" class="error" role="alert">{{ error }}</p>
-      <p class="help">Press ESC to leave terminal.</p>
+        <p v-if="error" class="error" role="alert">{{ error }}</p>
+        <small class="system-note"
+          >Fictional archive system // ESC to exit</small
+        >
+      </div>
     </section>
 
-    <section v-else class="records">
-      <nav>
-        <b>RECORD DATABASE</b>
-        <button type="button" @click="logout">LOG OUT</button>
-      </nav>
+    <section v-else class="desktop-frame">
+      <div ref="desktopRef" class="desktop">
+        <header class="desktop-header">
+          <div class="wordmark">
+            <span class="mini-seal">FBI</span>
+            <div>
+              <b>FBI CASE MANAGEMENT</b>
+              <small>WASHINGTON SECURE NODE</small>
+            </div>
+          </div>
+          <span class="classification">UNCLASSIFIED // TRAINING SYSTEM</span>
+        </header>
 
-      <h1>Case File 04-1337</h1>
+        <div class="desktop-files" aria-label="Desktop files">
+          <button class="file-icon" type="button" @click="openCase">
+            <span class="folder" aria-hidden="true"><i>TH</i></span>
+            <span>TH_CASE</span>
+          </button>
 
-      <table>
-        <tbody>
-          <tr>
-            <th>Status</th>
-            <td>OPEN</td>
-          </tr>
-          <tr>
-            <th>Classification</th>
-            <td>RESTRICTED</td>
-          </tr>
-          <tr>
-            <th>Subject</th>
-            <td>UNKNOWN</td>
-          </tr>
-          <tr>
-            <th>Last activity</th>
-            <td>03:17 / SECTOR 12</td>
-          </tr>
-        </tbody>
-      </table>
+          <button class="file-icon muted" type="button">
+            <span class="document-icon" aria-hidden="true"></span>
+            <span>README.TXT</span>
+          </button>
 
-      <div class="note">
-        <b>REPORT</b>
-        <p>
-          An unidentified signal was recorded near the archive terminal.
-          Investigation remains active. No further action authorized.
-        </p>
+          <button class="file-icon muted" type="button">
+            <span class="folder" aria-hidden="true"><i>DB</i></span>
+            <span>ARCHIVE</span>
+          </button>
+        </div>
+
+        <article
+          v-if="caseOpen"
+          ref="caseWindowRef"
+          class="case-window"
+          :style="caseWindowStyle"
+          tabindex="-1"
+        >
+          <div class="window-titlebar" @pointerdown="startDrag">
+            <span>TH_CASE — CASE FILE VIEWER</span>
+            <button
+              type="button"
+              aria-label="Close case file"
+              @pointerdown.stop
+              @click="closeCase"
+            >
+              ×
+            </button>
+          </div>
+
+          <div class="window-menu">
+            File&nbsp;&nbsp; Edit&nbsp;&nbsp; View&nbsp;&nbsp; Security
+          </div>
+
+          <div class="case-scroll">
+            <section class="paper-file">
+              <div class="paper-tab">TH / 04-1337</div>
+
+              <div class="case-masthead">
+                <div class="case-seal">FBI</div>
+                <div>
+                  <small>UNITED STATES DEPARTMENT OF JUSTICE</small>
+                  <h1>CASE INVESTIGATION RECORD</h1>
+                  <p>FEDERAL BUREAU OF INVESTIGATION</p>
+                </div>
+                <div class="stamp">CONFIDENTIAL</div>
+              </div>
+
+              <dl class="case-fields">
+                <div>
+                  <dt>FILE NUMBER</dt>
+                  <dd>TH-04-1337</dd>
+                </div>
+                <div>
+                  <dt>STATUS</dt>
+                  <dd>ACTIVE</dd>
+                </div>
+                <div>
+                  <dt>SUBJECT</dt>
+                  <dd>HERPEL, TOM</dd>
+                </div>
+                <div>
+                  <dt>ALIAS</dt>
+                  <dd>"TH"</dd>
+                </div>
+                <div>
+                  <dt>DATE OPENED</dt>
+                  <dd>09 / 12 / 2001</dd>
+                </div>
+                <div>
+                  <dt>ASSIGNED UNIT</dt>
+                  <dd>DIGITAL RECORDS DIVISION</dd>
+                </div>
+              </dl>
+
+              <section class="case-section">
+                <h2>SUBJECT SUMMARY</h2>
+                <p>
+                  Subject is connected to a series of experimental computer
+                  systems and unidentified digital transmissions. Activity has
+                  been observed across several independent network locations.
+                </p>
+              </section>
+
+              <section class="case-section">
+                <h2>KNOWN INFORMATION</h2>
+                <table>
+                  <tbody>
+                    <tr>
+                      <th>Occupation</th>
+                      <td>Software Developer</td>
+                    </tr>
+                    <tr>
+                      <th>Primary skill</th>
+                      <td>Interactive systems</td>
+                    </tr>
+                    <tr>
+                      <th>Last known area</th>
+                      <td>Central Europe</td>
+                    </tr>
+                    <tr>
+                      <th>Risk assessment</th>
+                      <td>Low / observation only</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </section>
+
+              <section class="case-section">
+                <h2>ACTIVITY LOG</h2>
+                <ol class="activity-log">
+                  <li>
+                    <time>09/12/01</time
+                    ><span>Case file created by Records Division.</span>
+                  </li>
+                  <li>
+                    <time>09/18/01</time
+                    ><span>Unidentified terminal activity recorded.</span>
+                  </li>
+                  <li>
+                    <time>10/02/01</time
+                    ><span>Archive reference TH confirmed.</span>
+                  </li>
+                  <li>
+                    <time>10/11/01</time
+                    ><span>Investigation status retained as active.</span>
+                  </li>
+                </ol>
+              </section>
+
+              <section class="case-section last-section">
+                <h2>AGENT NOTE</h2>
+                <p>
+                  Maintain passive monitoring. No contact has been authorized.
+                  Refer all additional material to file TH-04-1337.
+                </p>
+                <div class="signature">SIGNED // SPECIAL AGENT R. KELLER</div>
+              </section>
+            </section>
+          </div>
+        </article>
+
+        <footer class="taskbar">
+          <button class="start-button" type="button"><b>FBI</b> Start</button>
+          <button
+            v-if="caseOpen"
+            class="task-button"
+            type="button"
+            @click="openCase"
+          >
+            TH_CASE
+          </button>
+          <span class="task-spacer"></span>
+          <button class="logout-button" type="button" @click="logout">
+            Log off
+          </button>
+          <time>{{ currentTime }}</time>
+        </footer>
       </div>
-
-      <footer>FICTIONAL ARCHIVE SYSTEM // LOCAL TERMINAL</footer>
     </section>
   </main>
 </template>
 
 <style scoped>
-:global(*) {
+* {
   box-sizing: border-box;
 }
 
-:global(html),
-:global(body),
-:global(#app) {
+html,
+body,
+#app {
   width: 100%;
   height: 100%;
   margin: 0;
@@ -139,238 +378,613 @@ onUnmounted(() => {
   background: #000;
 }
 
-:global(body) {
-  font-family: Verdana, Arial, sans-serif;
+body {
+  font-family: Tahoma, Verdana, Arial, sans-serif;
+  cursor: default !important;
+}
+
+button,
+input {
+  font: inherit;
 }
 
 .page {
   width: 100%;
   height: 100dvh;
+  padding: clamp(14px, 2.5vmin, 30px);
   overflow: hidden;
-  color: #b7c2b9;
+  color: #d7ddd9;
   background: #000;
-  font-size: clamp(12px, 1.4vw, 16px);
+  font-size: clamp(12px, 1.3vw, 16px);
 }
 
-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 54px;
-  padding: 0 22px;
-  border-bottom: 1px solid #526056;
-  color: #d4ddd6;
-  background: #111;
-  font-family: "Courier New", monospace;
+.login-screen,
+.desktop-frame {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #000;
 }
 
-header span {
-  color: #718076;
-  font-size: 0.75em;
+.login-screen {
+  display: grid;
+  place-items: center;
 }
 
 .login-box {
-  width: min(430px, calc(100% - 36px));
-  margin: clamp(40px, 14vh, 110px) auto 0;
-  padding: 22px;
-  border: 1px solid #58635b;
-  background: #080a08;
+  width: min(440px, calc(100% - 34px));
+  padding: 24px;
+  border: 1px solid #4e5c54;
+  background: #000;
 }
 
-h1 {
-  margin: 0 0 18px;
-  color: #d6ddd7;
+.login-brand,
+.wordmark {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.seal,
+.mini-seal,
+.case-seal {
+  display: grid;
+  place-items: center;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  font-family: Georgia, serif;
+  font-weight: 700;
+}
+
+.seal {
+  width: 56px;
+  height: 56px;
+  color: #9daaa2;
+}
+
+.login-brand b,
+.login-brand small,
+.wordmark b,
+.wordmark small {
+  display: block;
+}
+
+.login-brand b {
   font:
-    bold 1.25em "Courier New",
+    700 0.82em "Courier New",
     monospace;
 }
 
-p {
-  line-height: 1.5;
+.login-brand small,
+.wordmark small {
+  margin-top: 3px;
+  color: #68776e;
+  font-size: 0.64em;
 }
 
-form {
+.login-box h1 {
+  margin: 28px 0 8px;
+  font:
+    700 1.35em "Courier New",
+    monospace;
+}
+
+.login-box p {
+  margin: 0;
+  color: #89958e;
+}
+
+.login-box form {
   display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
+  grid-template-columns: 1fr auto;
   gap: 8px;
   margin-top: 24px;
 }
 
-label {
-  white-space: nowrap;
+.login-box label {
+  grid-column: 1 / -1;
+  color: #78867d;
+  font:
+    0.72em "Courier New",
+    monospace;
 }
 
-input,
-button {
-  border: 1px solid #5c685e;
+.login-box input,
+.login-box button {
+  height: 34px;
+  border: 1px solid #526158;
   border-radius: 0;
-  font: inherit;
 }
 
-input {
+.login-box input {
   min-width: 0;
-  padding: 7px;
+  padding: 6px 9px;
   outline: none;
-  color: #9ee6ad;
+  color: #a9e7b9;
   background: #000;
 }
 
-input:focus {
-  border-color: #9ee6ad;
+.login-box input:focus {
+  border-color: #8cad96;
 }
 
-button {
-  padding: 7px 12px;
-  color: #d1d8d2;
-  background: #242924;
+.login-box button,
+.taskbar button,
+.window-titlebar button {
+  color: #d6ddd8;
+  background: #252d28;
   cursor: pointer;
 }
 
-button:hover,
-button:focus-visible {
-  color: #fff;
-  background: #343b35;
+.login-box button {
+  padding: 0 16px;
 }
 
 .error {
-  margin: 15px 0 0;
-  color: #d76b62;
+  margin-top: 14px !important;
+  color: #cf655e !important;
   font-family: "Courier New", monospace;
 }
 
-.help {
-  margin: 22px 0 0;
-  color: #667068;
-  font-size: 0.75em;
+.system-note {
+  display: block;
+  margin-top: 24px;
+  color: #536058;
 }
 
-.records {
-  width: min(760px, calc(100% - 36px));
-  height: calc(100dvh - 82px);
-  margin: 18px auto 0;
+.desktop-frame {
+  position: relative;
+  padding: 7px;
+  background: #000;
+}
+
+.desktop {
+  position: relative;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
-  border: 1px solid #4d574f;
-  background: #060706;
+  border: 1px solid #506057;
+  background:
+    linear-gradient(rgba(5, 18, 12, 0.94), rgba(5, 18, 12, 0.94)),
+    repeating-linear-gradient(
+      90deg,
+      transparent 0 39px,
+      rgba(125, 157, 137, 0.03) 40px
+    ),
+    #07110c;
 }
 
-nav {
+.desktop-header {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 42px;
-  padding: 0 14px;
-  border-bottom: 1px solid #4d574f;
-  color: #9ee6ad;
-  background: #121512;
+  height: 58px;
+  padding: 0 18px;
+  border-bottom: 1px solid #3e5046;
+  background: #0b120e;
+}
+
+.mini-seal {
+  width: 36px;
+  height: 36px;
+  color: #9eafa5;
+  font-size: 0.74em;
+}
+
+.wordmark b {
+  color: #ced8d1;
+  font:
+    700 0.76em "Courier New",
+    monospace;
+  letter-spacing: 0.04em;
+}
+
+.classification {
+  color: #65756b;
+  font:
+    0.64em "Courier New",
+    monospace;
+}
+
+.desktop-files {
+  position: absolute;
+  top: 76px;
+  left: 16px;
+  display: grid;
+  grid-template-columns: repeat(2, 82px);
+  gap: 22px 12px;
+}
+
+.file-icon {
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  width: 82px;
+  padding: 4px;
+  border: 1px solid transparent;
+  color: #d9e0db;
+  background: transparent;
+  font-size: 0.68em;
+  cursor: pointer;
+}
+
+.file-icon:hover,
+.file-icon:focus-visible {
+  border-color: #687c70;
+  outline: none;
+  background: rgba(118, 148, 130, 0.15);
+}
+
+.file-icon.muted {
+  color: #87928b;
+}
+
+.folder {
+  position: relative;
+  display: grid;
+  width: 48px;
+  height: 36px;
+  place-items: center;
+  border: 1px solid #8d8260;
+  background: #918256;
+  box-shadow: inset 0 0 0 2px #b0a170;
+}
+
+.folder::before {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 3px;
+  width: 20px;
+  height: 6px;
+  border: 1px solid #8d8260;
+  border-bottom: 0;
+  background: #918256;
+}
+
+.folder i {
+  color: #191a16;
+  font:
+    700 0.72em Arial,
+    sans-serif;
+  font-style: normal;
+}
+
+.document-icon {
+  position: relative;
+  width: 34px;
+  height: 43px;
+  border: 1px solid #87948c;
+  background: #c8d0ca;
+}
+
+.document-icon::after {
+  content: "";
+  position: absolute;
+  top: 10px;
+  right: 6px;
+  bottom: 8px;
+  left: 6px;
+  background: repeating-linear-gradient(#6b746e 0 1px, transparent 1px 6px);
+}
+
+.case-window {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-rows: 31px 25px minmax(0, 1fr);
+  width: min(76%, 100%);
+  height: min(78%, 90%);
+  min-width: 380px;
+  min-height: 260px;
+  overflow: hidden;
+  border: 2px solid #b5b9b6;
+  outline: 1px solid #181b19;
+  color: #131713;
+  background: #b9bdb9;
+  box-shadow: 7px 9px 0 rgba(0, 0, 0, 0.45);
+}
+
+.window-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 9px;
+  color: #fff;
+  background: #173e2a;
+  font:
+    700 0.72em Tahoma,
+    sans-serif;
+  cursor: move;
+  touch-action: none;
+  user-select: none;
+}
+
+.window-titlebar button {
+  width: 26px;
+  height: 23px;
+  margin-right: 3px;
+  padding: 0;
+  border: 1px outset #d0d4d1;
+  color: #111;
+  background: #c4c8c5;
+  font-size: 1.2em;
+  line-height: 1;
+}
+
+.window-menu {
+  padding: 5px 9px;
+  border-bottom: 1px solid #7f8580;
+  color: #222;
+  background: #c4c8c5;
+  font-size: 0.66em;
+}
+
+.case-scroll {
+  min-height: 0;
+  padding: 16px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: #777d78;
+  scrollbar-color: #687169 #c2c5c2;
+}
+
+.paper-file {
+  position: relative;
+  width: min(100%, 792px);
+  min-height: 780px;
+  margin: 12px auto 28px;
+  padding: 42px clamp(24px, 5vw, 56px) 54px;
+  color: #25231e;
+  background: #ded9c8;
+  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.26);
   font-family: "Courier New", monospace;
 }
 
-nav button {
-  padding: 4px 9px;
-  font-size: 0.75em;
+.paper-tab {
+  position: absolute;
+  bottom: 100%;
+  left: 18px;
+  padding: 6px 18px 5px;
+  border-bottom: 1px solid #afa992;
+  background: #cfc8af;
+  font-size: 0.72em;
+  font-weight: 700;
 }
 
-.records > h1,
-.records > table,
-.records > .note {
-  margin-right: 20px;
-  margin-left: 20px;
+.case-masthead {
+  display: grid;
+  grid-template-columns: 62px 1fr auto;
+  align-items: center;
+  gap: 14px;
+  padding-bottom: 18px;
+  border-bottom: 3px double #4e4a3e;
+  text-align: center;
 }
 
-.records > h1 {
-  margin-top: 20px;
+.case-seal {
+  width: 58px;
+  height: 58px;
+  color: #343129;
+  font-size: 1.15em;
 }
 
-table {
-  width: calc(100% - 40px);
-  border-collapse: collapse;
+.case-masthead small,
+.case-masthead p {
+  font-size: 0.62em;
 }
 
-th,
-td {
+.case-masthead h1 {
+  margin: 4px 0;
+  font-size: 1.22em;
+  line-height: 1.1;
+}
+
+.case-masthead p {
+  margin: 0;
+}
+
+.stamp {
+  padding: 7px 8px;
+  border: 3px double #8e302b;
+  color: #8e302b;
+  font-size: 0.64em;
+  font-weight: 700;
+  transform: rotate(-5deg);
+}
+
+.case-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin: 24px 0;
+  border-top: 1px solid #777264;
+  border-left: 1px solid #777264;
+}
+
+.case-fields div {
   padding: 8px 10px;
-  border: 1px solid #3e473f;
+  border-right: 1px solid #777264;
+  border-bottom: 1px solid #777264;
+}
+
+.case-fields dt {
+  font-size: 0.9em;
+  font-weight: 900;
+}
+
+.case-fields dd {
+  margin: 4px 0 0;
+  font-size: 0.78em;
+}
+
+.case-section {
+  margin-top: 26px;
+}
+
+.case-section h2 {
+  margin: 0 0 9px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid #777264;
+  font-size: 0.8em;
+  letter-spacing: 0.08em;
+}
+
+.case-section p {
+  margin: 0;
+  font-size: 0.77em;
+  line-height: 1.65;
+}
+
+.case-section table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.72em;
+}
+
+.case-section th,
+.case-section td {
+  padding: 7px 9px;
+  border: 1px solid #888273;
   text-align: left;
 }
 
-th {
+.case-section th {
   width: 34%;
-  color: #78847a;
-  background: #0c0f0c;
-  font-weight: normal;
+  background: rgba(75, 69, 56, 0.08);
 }
 
-td {
-  color: #a7d9b0;
-  font-family: "Courier New", monospace;
+.activity-log {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.73em;
 }
 
-.note {
-  margin-top: 20px;
-  padding: 14px;
-  border: 1px solid #3e473f;
+.activity-log li {
+  display: grid;
+  grid-template-columns: 80px 1fr;
+  gap: 12px;
+  padding: 7px 0;
+  border-bottom: 1px dotted #948e7d;
 }
 
-.note b {
-  color: #78847a;
-  font-size: 0.8em;
+.activity-log time {
+  font-weight: 700;
 }
 
-.note p {
-  margin: 8px 0 0;
+.last-section {
+  margin-bottom: 22px;
 }
 
-footer {
-  margin: 22px 20px 0;
-  color: #566058;
-  font:
-    0.7em "Courier New",
-    monospace;
+.signature {
+  margin-top: 26px;
+  font-size: 0.68em;
   text-align: right;
 }
 
-@media (max-width: 500px), (max-height: 500px) {
-  header {
-    height: 44px;
-    padding: 0 12px;
+.taskbar {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 34px;
+  padding: 3px 5px;
+  border-top: 2px outset #a6ada8;
+  color: #171a18;
+  background: #aeb4b0;
+}
+
+.taskbar button {
+  height: 27px;
+  padding: 0 10px;
+  border: 2px outset #d1d5d2;
+  color: #121512;
+  background: #b9bebb;
+  font-size: 0.7em;
+}
+
+.start-button {
+  min-width: 72px;
+}
+
+.start-button b {
+  color: #173e2a;
+}
+
+.task-button {
+  width: min(180px, 28vw);
+  text-align: left;
+}
+
+.task-spacer {
+  flex: 1;
+}
+
+.taskbar time {
+  min-width: 76px;
+  padding: 5px 7px;
+  border: 1px inset #d1d5d2;
+  font-size: 0.68em;
+  text-align: center;
+}
+
+@media (max-width: 700px), (max-height: 540px) {
+  .page {
+    padding: 10px;
   }
 
-  .login-box {
-    margin-top: 24px;
-    padding: 16px;
+  .desktop-header {
+    height: 46px;
   }
 
-  form {
-    grid-template-columns: 1fr auto;
-  }
-
-  form label {
-    grid-column: 1 / -1;
-  }
-
-  .records {
-    height: calc(100dvh - 58px);
-    margin-top: 7px;
-  }
-
-  .records > h1 {
-    margin-top: 12px;
-    margin-bottom: 10px;
-  }
-
-  th,
-  td {
-    padding: 5px 7px;
-  }
-
-  .note {
-    margin-top: 10px;
-    padding: 8px;
-  }
-
-  footer {
+  .classification,
+  .wordmark small {
     display: none;
   }
+
+  .desktop-files {
+    top: 62px;
+  }
+
+  .case-window {
+    width: calc(100% - 16px);
+    height: calc(100% - 50px);
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .paper-file {
+    padding-right: 22px;
+    padding-left: 22px;
+  }
+}
+
+@media (max-width: 500px) {
+  .case-masthead {
+    grid-template-columns: 48px 1fr;
+  }
+
+  .case-seal {
+    width: 44px;
+    height: 44px;
+  }
+
+  .stamp {
+    display: none;
+  }
+
+  .case-fields {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 1f4993e..d978359 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -15,7 +15,7 @@ const routes: RouteRecordRaw[] = [
   {path: '/motion/me', component: BigMeImg},
   {path: '/books', component: BooksShow},
   {
-  path: "/computer", component: OsWebseite},
+  path: "/motion/computer", component: OsWebseite},
 
   // { path: '/ducks',
   //    component: DucksInfo,