diff --git a/wp-content/themes/moonshine/app/composables/useReponsive.ts b/wp-content/themes/moonshine/app/composables/useReponsive.ts
new file mode 100644
index 0000000..45c0a73
--- /dev/null
+++ b/wp-content/themes/moonshine/app/composables/useReponsive.ts
@@ -0,0 +1,9 @@
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+
+export function useResponsive() {
+  const { isMobileOrTablet } = useDevice();
+  const breakpoints = useBreakpoints(breakpointsTailwind, { ssrWidth: isMobileOrTablet ? 375 : 1024 });
+  const isDesktop = breakpoints.greaterOrEqual("lg");
+
+  return { breakpoints, isDesktop };
+}
diff --git a/wp-content/themes/moonshine/nuxt.config.ts b/wp-content/themes/moonshine/nuxt.config.ts
index ad618e5..80506be 100644
--- a/wp-content/themes/moonshine/nuxt.config.ts
+++ b/wp-content/themes/moonshine/nuxt.config.ts
@@ -15,6 +15,7 @@ export default defineNuxtConfig({
     "@lewebsimple/nuxt-graphql",
     "@nuxt/eslint",
     "@nuxt/ui",
+    "@nuxtjs/device",
     "@nuxtjs/seo",
     "nuxt-auth-utils",
   ],
diff --git a/wp-content/themes/moonshine/package.json b/wp-content/themes/moonshine/package.json
index 1655e69..d993892 100644
--- a/wp-content/themes/moonshine/package.json
+++ b/wp-content/themes/moonshine/package.json
@@ -18,7 +18,8 @@
     "@iconify-json/lucide": "^1.2.87",
     "@lewebsimple/nuxt-graphql": "^0.6.1",
     "@nuxt/ui": "4.3.0",
-    "@nuxtjs/seo": "^3.3.0",
+    "@nuxtjs/device": "4.0.0",
+    "@nuxtjs/seo": "^3.4.0",
     "jwt-decode": "^4.0.0",
     "nuxt": "^4.3.0",
     "nuxt-auth-utils": "^0.5.28",