diff --git a/components/section.tsx b/components/section.tsx
index a061a8c54..c605462f8 100644
--- a/components/section.tsx
+++ b/components/section.tsx
@@ -11,9 +11,11 @@ import { ComponentFunc } from "../engine/block.ts";
 import { FieldResolver } from "../engine/core/resolver.ts";
 import { logger } from "../observability/otel/config.ts";
 import { PartialProps } from "$fresh/src/runtime/Partial.tsx";
+import { Device, deviceOf } from "deco/utils/userAgent.ts";
 
 export interface SectionContext extends HttpContext<RequestState> {
   renderSalt?: string;
+  device: Device;
 }
 
 export const SectionContext = createContext<
@@ -144,6 +146,8 @@ export const withSection = <TProps,>(
   const idPrefix = getSectionID(ctx.resolveChain);
   const debugEnabled = ctx.context?.state?.debugEnabled;
   const renderSaltFromState = ctx.context?.state?.renderSalt;
+  let device: Device | null = null;
+
   return {
     props,
     Component: (props: TProps) => {
@@ -161,6 +165,9 @@ export const withSection = <TProps,>(
           value={{
             ...ctx,
             renderSalt,
+            get device() {
+              return device ??= deviceOf(ctx.request);
+            },
           }}
         >
           <Partial name={id} mode={partialMode}>
diff --git a/hooks/useDevice.ts b/hooks/useDevice.ts
new file mode 100644
index 000000000..7f525098f
--- /dev/null
+++ b/hooks/useDevice.ts
@@ -0,0 +1,8 @@
+import { useContext } from "preact/hooks";
+import { SectionContext } from "deco/components/section.tsx";
+
+export const useDevice = () => {
+  const ctx = useContext(SectionContext);
+
+  return ctx?.device;
+};