diff --git a/website/bun.lockb b/website/bun.lockb
index fbb3219..f5217be 100755
Binary files a/website/bun.lockb and b/website/bun.lockb differ
diff --git a/website/package.json b/website/package.json
index 6b22bf7..57d3b87 100644
--- a/website/package.json
+++ b/website/package.json
@@ -29,7 +29,7 @@
     "@builder.io/qwik": "^1.5.1",
     "@builder.io/qwik-city": "^1.5.1",
     "@builder.io/qwik-labs": "github:BuilderIo/qwik-labs-build#main",
-    "@ditadi/qwik-hooks": "0.1.5",
+    "@ditadi/qwik-hooks": "0.1.6-beta.1",
     "@fontsource-variable/fira-code": "^5.0.17",
     "@fontsource-variable/outfit": "^5.0.12",
     "@qwik-ui/headless": "^0.3.3",
diff --git a/website/src/docs/index.ts b/website/src/docs/index.ts
index 32a4d01..190c637 100644
--- a/website/src/docs/index.ts
+++ b/website/src/docs/index.ts
@@ -2,6 +2,7 @@ import useCopyClipboard from "./copy-clipboard/doc";
 import useDebounce from "./debounce/doc";
 import useLocalStorage from "./local-storage/doc";
 import useMediaQuery from "./media-query/doc";
+import useOrientation from "./orientation/doc";
 import usePrevious from "./previous/doc";
 import useWindowSize from "./window-size/doc";
 
@@ -35,4 +36,5 @@ export default [
     useWindowSize,
     usePrevious,
     useMediaQuery,
+    useOrientation,
 ] as HookDoc[];
diff --git a/website/src/docs/orientation/code.ts b/website/src/docs/orientation/code.ts
new file mode 100644
index 0000000..4f07e84
--- /dev/null
+++ b/website/src/docs/orientation/code.ts
@@ -0,0 +1,23 @@
+export default `
+
+import { component$ } from "@builder.io/qwik";
+import { useOrientation } from "@ditadi/qwik-hooks";
+
+export default component$(() => {
+    const { value: orientation } = useOrientation();
+
+    return (
+        <div class="flex flex-col bg-background w-full items-center p-10 gap-5">
+            <h1 class="text-white">useOrientation</h1>
+
+            <div
+                class={\`w-[200px] rotate-\${orientation.angle} aspect-video bg-transparent border-primary border flex justify-center p-4 flex-col\`}
+            />
+            <div class="flex gap-5 bg-foreground px-4 py-2 border border-primary rounded-sm">
+                <span class="text-white">Type: {orientation.type}</span>
+                <span class="text-white">Angle: {orientation.angle}</span>
+            </div>
+        </div>
+    );
+});
+`;
diff --git a/website/src/docs/orientation/demo.tsx b/website/src/docs/orientation/demo.tsx
new file mode 100644
index 0000000..c34aa5c
--- /dev/null
+++ b/website/src/docs/orientation/demo.tsx
@@ -0,0 +1,20 @@
+import { component$ } from "@builder.io/qwik";
+import { useOrientation } from "@ditadi/qwik-hooks";
+
+export default component$(() => {
+    const { value: orientation } = useOrientation();
+
+    return (
+        <div class="flex flex-col bg-background w-full items-center p-10 gap-5">
+            <h1 class="text-white">useOrientation</h1>
+
+            <div
+                class={`w-[200px] rotate-${orientation.angle} aspect-video bg-transparent border-primary border flex justify-center p-4 flex-col`}
+            />
+            <div class="flex gap-5 bg-foreground px-4 py-2 border border-primary rounded-sm">
+                <span class="text-white">Type: {orientation.type}</span>
+                <span class="text-white">Angle: {orientation.angle}</span>
+            </div>
+        </div>
+    );
+});
diff --git a/website/src/docs/orientation/doc.tsx b/website/src/docs/orientation/doc.tsx
new file mode 100644
index 0000000..10fa2ec
--- /dev/null
+++ b/website/src/docs/orientation/doc.tsx
@@ -0,0 +1,22 @@
+import type { HookDoc } from "..";
+import UseOrientationCode from "./code";
+import UseOrientationDemo from "./demo";
+
+export default {
+    key: "useorientation",
+    title: "useOrientation",
+    highlight: "Manage and respond to changes in device orientation with useOrientation.",
+    description:
+        "The useOrientation React Hook simplifies the management of a device’s orientation within a React application. It wraps the complexity of listening for, handling, and cleaning up after orientation changes into a reusable hook. By abstracting this logic, the hook allows you to easily track device orientation, resulting in cleaner and more readable code. It adapts to both the Screen Orientation API and the deprecated window.orientation property, providing flexibility across different browser capabilities.",
+    params: [],
+    return: [
+        {
+            name: "orientation",
+            type: "Signal<{ angle: number; type: string }>",
+            description:
+                "The current orientation of the device, including the angle and type of orientation.",
+        },
+    ],
+    demo: UseOrientationDemo,
+    code: UseOrientationCode,
+} as HookDoc;