diff --git a/src/routes/page/conversation/[conversationId]/conv-overview.svelte b/src/routes/page/conversation/[conversationId]/conv-overview.svelte
index fa1cdce8..e46cb70e 100644
--- a/src/routes/page/conversation/[conversationId]/conv-overview.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-overview.svelte
@@ -11,7 +11,7 @@
     <CardBody>
         <div class="text-center">
             <!--<img src={adobephotoshop} alt="" height="50" class="mx-auto d-block" />-->
-            <h5 class="mt-3 mb-1">{conversation.title}</h5>
+            <h5 class="mt-3 mb-1 ellipsis">{conversation.title}</h5>
             <p class="text-muted mb-0">{utcToLocal(conversation.created_time)}</p>
         </div>
 
diff --git a/src/routes/page/conversation/[conversationId]/conv-states.svelte b/src/routes/page/conversation/[conversationId]/conv-states.svelte
index 3706324a..36b5cab4 100644
--- a/src/routes/page/conversation/[conversationId]/conv-states.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-states.svelte
@@ -1,14 +1,15 @@
 <script>
-    import { Button, Card, CardBody, CardTitle} from '@sveltestrap/sveltestrap';
-    import jsonview from '@pgrabovets/json-view';
     import { onMount } from 'svelte';
+    import { Card, CardBody, CardTitle} from '@sveltestrap/sveltestrap';
+    import jsonview from '@pgrabovets/json-view';
+	import { formatObject } from '$lib/helpers/utils/common';
 
     /** @type {import('$conversationTypes').ConversationModel} */
     export let conversation;    
 
     onMount(() => {
         // create json tree object
-        const tree = jsonview.create(conversation.states);
+        const tree = jsonview.create(formatObject(conversation.states));
 
         // render tree into dom element
         jsonview.render(tree, document.querySelector('#conversationStates'));