diff --git a/.gitignore b/.gitignore
index d1595af..0a6f608 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+.idea/
diff --git a/apps/website_dashboard/components/pages/dashboard/collections/collection_subroute_pages/query/hit_component.tsx b/apps/website_dashboard/components/pages/dashboard/collections/collection_subroute_pages/query/hit_component.tsx
index 74803fa..da6f512 100644
--- a/apps/website_dashboard/components/pages/dashboard/collections/collection_subroute_pages/query/hit_component.tsx
+++ b/apps/website_dashboard/components/pages/dashboard/collections/collection_subroute_pages/query/hit_component.tsx
@@ -1,37 +1,42 @@
 import React from "react";
 
 interface HitComponentProps {
-  hit: any;
-  keys: Record<"inSchema" | "notInSchema", string[]>;
+    hit: any;
+    keys: Record<"inSchema" | "notInSchema", string[]>;
+}
+const showData = (data: any) => {
+    if(typeof data === "object"){
+        return JSON.stringify(data)
+    }
+    return data
 }
-
 const HitComponent = ({ hit, keys }: HitComponentProps) => {
-  return (
-    <div className="flex flex-col w-full gap-1 px-3 py-3 my-3 bg-[#f5f7fb] rounded-md">
-      <div>
-        {keys.notInSchema.map((field, index) => {
-          return (
-            <div key={index} className="flex gap-3 ">
-              <p className="font-semibold font-oswald">{field}</p>
-              <p>:</p>
-              <p className="font-oswald">{hit[field]}</p>
+    return (
+        <div className="flex flex-col w-full gap-1 px-3 py-3 my-3 bg-[#f5f7fb] rounded-md">
+            <div>
+                {keys.notInSchema.map((field, index) => {
+                    return (
+                        <div key={index} className="flex gap-3 ">
+                            <p className="font-semibold font-oswald">{field}</p>
+                            <p>:</p>
+                            <p className="font-oswald">{showData(hit[field])}</p>
+                        </div>
+                    );
+                })}
             </div>
-          );
-        })}
-      </div>
-      <div>
-        {keys.inSchema.map((field, index) => {
-          return (
-            <div key={index} className="flex gap-3 ">
-              <p className="font-semibold font-oswald">{field}</p>
-              <p>:</p>
-              <p className="font-oswald">{hit[field]}</p>
+            <div>
+                {keys.inSchema.map((field, index) => {
+                    return (
+                        <div key={index} className="flex gap-3 ">
+                            <p className="font-semibold font-oswald">{field}</p>
+                            <p>:</p>
+                            <p className="font-oswald">{showData(hit[field])}</p>
+                        </div>
+                    );
+                })}
             </div>
-          );
-        })}
-      </div>
-    </div>
-  );
+        </div>
+    );
 };
 
 export default HitComponent;