diff --git a/server/plugins/com.msgbyte.discover/web/plugins/com.msgbyte.discover/src/DiscoverPanel/DiscoverServerCard.tsx b/server/plugins/com.msgbyte.discover/web/plugins/com.msgbyte.discover/src/DiscoverPanel/DiscoverServerCard.tsx
index ce7a8e8b..29611dc0 100644
--- a/server/plugins/com.msgbyte.discover/web/plugins/com.msgbyte.discover/src/DiscoverPanel/DiscoverServerCard.tsx
+++ b/server/plugins/com.msgbyte.discover/web/plugins/com.msgbyte.discover/src/DiscoverPanel/DiscoverServerCard.tsx
@@ -37,10 +37,12 @@ const Root = styled.div`
   }
 
   .body {
+    flex: 1;
     display: flex;
+    flex-direction: column;
     padding: 0 16px 16px;
     overflow: hidden;
-    flex: 1;
+    width: 100%;
 
     .name {
       font-weight: 600;
@@ -48,6 +50,8 @@ const Root = styled.div`
 
     .desc {
       opacity: 0.8;
+      overflow: auto;
+      font-size: 0.9rem;
     }
   }
 
@@ -110,14 +114,16 @@ export const DiscoverServerCard: React.FC<DiscoverServerCardProps> = React.memo(
             <Avatar
               shape="square"
               size={40}
-              src={groupBasicInfo.icon}
+              src={groupBasicInfo.avatar}
               name={groupBasicInfo.name}
             />
           </div>
         </div>
         <div className="body">
           <div className="name">{groupBasicInfo.name}</div>
-          <div className="desc"></div>
+          <div className="desc">
+            <pre>{groupBasicInfo.description}</pre>
+          </div>
         </div>
         <div className="footer">
           <div>
diff --git a/server/plugins/com.msgbyte.discover/web/plugins/com.msgbyte.discover/src/DiscoverPanel/index.tsx b/server/plugins/com.msgbyte.discover/web/plugins/com.msgbyte.discover/src/DiscoverPanel/index.tsx
index 8e92d90b..cccc0907 100644
--- a/server/plugins/com.msgbyte.discover/web/plugins/com.msgbyte.discover/src/DiscoverPanel/index.tsx
+++ b/server/plugins/com.msgbyte.discover/web/plugins/com.msgbyte.discover/src/DiscoverPanel/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useAsync } from '@capital/common';
-import { LoadingSpinner } from '@capital/component';
+import { LoadingSpinner, ErrorView } from '@capital/component';
 import { request } from '../request';
 import styled from 'styled-components';
 import { DiscoverServerCard } from './DiscoverServerCard';
@@ -31,9 +31,11 @@ const DiscoverServerList = styled.div`
 `;
 
 export const DiscoverPanel: React.FC = React.memo(() => {
-  const { loading, value: list = [] } = useAsync(async (): Promise<
-    DiscoverServerItem[]
-  > => {
+  const {
+    error,
+    loading,
+    value: list = [],
+  } = useAsync(async (): Promise<DiscoverServerItem[]> => {
     const { data } = await request.get('all');
 
     return data.list ?? [];
@@ -43,6 +45,10 @@ export const DiscoverPanel: React.FC = React.memo(() => {
     return <LoadingSpinner />;
   }
 
+  if (error) {
+    return <ErrorView error={error} />;
+  }
+
   return (
     <Root>
       <DiscoverServerHeader>{Translate.discoverHeader}</DiscoverServerHeader>