diff --git a/.env.haditha b/.env.haditha
index 66a8879..87f6d00 100644
--- a/.env.haditha
+++ b/.env.haditha
@@ -1,5 +1,5 @@
-VITE_API_NAME=api/
-VITE_BASE_URL=http://192.168.23.60/
+NUXT_PUBLIC_API_NAME=api/
+NUXT_PUBLIC_BASE_URL=http://192.168.23.60/
 
 VITE_APP_NAME=Hadith
 
diff --git a/app.vue b/app.vue
index 2520438..c610603 100644
--- a/app.vue
+++ b/app.vue
@@ -2,27 +2,9 @@
   <UApp :locale="fa_ir">
     <NuxtLoadingIndicator />
     <NuxtRouteAnnouncer />
-    <!-- <DevOnly> -->
-    <!-- this component will only be rendered during development -->
-    <!-- <LazyDebugBar /> -->
-
-    <!-- if you ever require to have a replacement during production -->
-    <!-- be sure to test these using `nuxt preview` -->
-    <!-- <template #fallback> -->
-    <!-- <div>empty div for flex.justify-between</div> -->
-    <!-- </template> -->
-    <!-- </DevOnly> -->
 
     <NuxtLayout>
-      <!-- this component will be rendered on client-side -->
-      <!-- <NuxtClientFallback
-        fallback-tag="span"
-        fallback="NuxtClientFallback"
-        @ssr-error="logSomeError"
-      > -->
       <NuxtPage />
-      <!-- <BrokeInSsr /> -->
-      <!-- </NuxtClientFallback> -->
     </NuxtLayout>
   </UApp>
 </template>
diff --git a/composables/useHadithaSearchComposable.ts b/composables/useHadithaSearchComposable.ts
new file mode 100644
index 0000000..1500ae5
--- /dev/null
+++ b/composables/useHadithaSearchComposable.ts
@@ -0,0 +1,31 @@
+// composables/useHadithaSearchComposable.js
+import { useStorage } from "@vueuse/core";
+
+export const useHadithaSearchComposable = <T>(url, options = {}) => {
+  const loading = ref(false); // Track loading state
+  const data = ref<T | null>(null);
+  const error = ref<any>(null);
+  const status = ref<string | null>(null);
+
+  // Get the authentication token (e.g., from a cookie or local storage)
+  // const token = useCookie('auth-token') // Assuming you store the token in a cookie
+  let token = useStorage("id_token", "GuestAccess");
+  const config = useRuntimeConfig();
+  console.info(config);
+
+  const baseURL =
+    config.public.NUXT_PUBLIC_BASE_URL + config.public.NUXT_PUBLIC_API_NAME;
+
+  // Add headers to the request
+  const headers = {
+    Authorization: token.value,
+    ...options.headers, // Merge with any existing headers
+  };
+
+  // Use useFetch with the headers
+  return useFetch<T>(url, {
+    ...options,
+    baseURL: baseURL,
+    headers,
+  });
+};
diff --git a/routes/haditha.ts b/routes/haditha.ts
index c404e0a..76abf37 100644
--- a/routes/haditha.ts
+++ b/routes/haditha.ts
@@ -9,6 +9,12 @@ export default [
     path: "/haditha/search",
     file: "~/systems/hadith_ui/pages/haditha/search/index.vue",
   },
+  {
+    name: "hadithaSearchShow",
+    path: "/haditha/search/:id/:slug?",
+    file: "~/systems/hadith_ui/pages/haditha/searchy/[id]/[slug]/index.vue",
+  },
+
   {
     name: "hadithaChatBot",
     path: "/haditha/chat-bot",