diff --git a/web/src/components/AgentSingleViewComponent.vue b/web/src/components/AgentSingleViewComponent.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
index 61ba0f64..4b14477e 100644
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@@ -788,7 +788,8 @@ watch(
       text-align: center;
       padding: 0;
       color: #ccc;
-      margin: 4px 0;
+      margin-top: 4px;
+      margin-bottom: 0;
       user-select: none;
     }
   }
diff --git a/web/src/components/MessageComponent.vue b/web/src/components/MessageComponent.vue
index 54a3fa93..c9b27110 100644
--- a/web/src/components/MessageComponent.vue
+++ b/web/src/components/MessageComponent.vue
@@ -130,15 +130,16 @@ const isEmptyAndLoading = computed(() => {
   padding: 0.625rem 1.25rem;
   user-select: text;
   word-break: break-word;
+  word-wrap: break-word;
   font-size: 15px;
-  font-weight: 400;
+  line-height: 24px;
   box-sizing: border-box;
   color: black;
   max-width: 100%;
   position: relative;
+  letter-spacing: .25px;
 
   &.user, &.sent {
-    line-height: 24px;
     max-width: 95%;
     color: white;
     background-color: var(--main-color);
@@ -152,7 +153,6 @@ const isEmptyAndLoading = computed(() => {
     color: initial;
     width: 100%;
     text-align: left;
-    word-wrap: break-word;
     margin: 0 0 16px 0;
     padding: 16px 0 0 0;
     text-align: justify;
@@ -162,13 +162,11 @@ const isEmptyAndLoading = computed(() => {
 
   .message-text {
     max-width: 100%;
-    word-wrap: break-word;
     margin-bottom: 0;
     white-space: pre-line;
   }
 
   .message-md {
-    word-wrap: break-word;
     margin-bottom: 0;
 
     :deep(code) {
diff --git a/web/src/router/index.js b/web/src/router/index.js
index 9aa9673a..ade8aa35 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -30,19 +30,25 @@ const router = createRouter({
         }
       ]
     },
-    // {
-    //   path: '/agent',
-    //   name: 'agent',
-    //   component: AppLayout,
-    //   children: [
-    //     {
-    //       path: '',
-    //       name: 'AgentComp',
-    //       component: () => import('../views/AgentView.vue'),
-    //       meta: { keepAlive: true }
-    //     }
-    //   ]
-    // },
+    {
+      path: '/agent',
+      name: 'agent',
+      component: AppLayout,
+      children: [
+        {
+          path: '',
+          name: 'AgentMain',
+          component: () => import('../views/AgentView.vue'),
+          meta: { keepAlive: true }
+        },
+        {
+          path: ':agent_id',
+          name: 'AgentSinglePage',
+          component: () => import('../components/AgentSingleViewComponent.vue'),
+          meta: { keepAlive: false }
+        }
+      ]
+    },
     {
       path: '/graph',
       name: 'graph',