diff --git a/src/pages/Fiber/Peer/index.module.scss b/src/pages/Fiber/Peer/index.module.scss
index 9839c7629..7313b7d28 100644
--- a/src/pages/Fiber/Peer/index.module.scss
+++ b/src/pages/Fiber/Peer/index.module.scss
@@ -70,6 +70,20 @@
     }
   }
 
+  .overview {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    background: #fff;
+    border-radius: 6px;
+    padding: 16px;
+    box-shadow: 0 2px 6px 0 #4d4d4d33;
+
+    .fields {
+      overflow: hidden;
+    }
+  }
+
   .id,
   .connectId {
     overflow: hidden;
@@ -81,15 +95,50 @@
     }
   }
 
-  .channels,
-  .transactions {
+  .activities {
+    display: flex;
+    gap: 16px;
     margin-top: 16px;
-    border-top: 1px solid #ccc;
-    padding-top: 16px;
 
-    h3 {
-      margin: 0;
-      padding: 0;
+    .channels,
+    .transactions {
+      flex: 1;
+      background: #fff;
+      border-radius: 6px;
+      padding: 16px;
+      box-shadow: 0 2px 6px 0 #4d4d4d33;
+
+      h3 {
+        margin: 0;
+        padding: 0;
+      }
+    }
+
+    @media screen and (width < 960px) {
+      flex-direction: column;
+    }
+
+    @media screen and (width < 500px) {
+      thead {
+        display: none;
+      }
+
+      tbody {
+        tr {
+          display: flex;
+          flex-direction: column;
+          padding: 16px 0;
+
+          &:not(:last-child) {
+            border-bottom: 1px solid #ccc;
+          }
+
+          td {
+            text-align: left;
+            padding: 0;
+          }
+        }
+      }
     }
   }
 
diff --git a/src/pages/Fiber/Peer/index.tsx b/src/pages/Fiber/Peer/index.tsx
index f7e94ee0a..e096dee4d 100644
--- a/src/pages/Fiber/Peer/index.tsx
+++ b/src/pages/Fiber/Peer/index.tsx
@@ -88,99 +88,103 @@ const Peer = () => {
   return (
     <Content>
       <div className={styles.container} onClick={handleCopy}>
-        <div>
-          <dl>
-            <dt>{t('fiber.peer.peer_id')}</dt>
-            <dd className={styles.id}>
-              <span>{peer.peerId}</span>
-              <button type="button" data-copy-text={peer.peerId}>
-                <CopyIcon />
-              </button>
-            </dd>
-          </dl>
-          <dl>
-            <dt>
-              <label htmlFor="rpc-addr">{t('fiber.peer.rpc_addr')}</label>
-            </dt>
-            <dd>
-              <select name="rpc-addr" id="rpc-addr" onChange={handleRpcAddrSelect}>
-                {peer.rpcListeningAddr.map(ra => {
-                  return (
-                    <option value={ra} key={ra}>
-                      {ra}
-                    </option>
-                  )
-                })}
-              </select>
-              <button type="button" data-copy-text={peer.rpcListeningAddr}>
-                <CopyIcon />
-              </button>
-              <a href={rpcAddr} title={rpcAddr} target="_blank" rel="noopener noreferrer">
-                <OpenInNewWindowIcon />
-              </a>
-            </dd>
-          </dl>
-          {connectId ? (
+        <div className={styles.overview}>
+          <div className={styles.fields}>
             <dl>
-              <dt>{t('fiber.peer.connect_id')}</dt>
-              <dd className={styles.connectId}>
-                <Tooltip title={connectId}>
-                  <span>{connectId}</span>
-                </Tooltip>
-                <button type="button" data-copy-text={connectId}>
+              <dt>{t('fiber.peer.peer_id')}</dt>
+              <dd className={styles.id}>
+                <span>{peer.peerId}</span>
+                <button type="button" data-copy-text={peer.peerId}>
                   <CopyIcon />
                 </button>
               </dd>
             </dl>
-          ) : null}
+            <dl>
+              <dt>
+                <label htmlFor="rpc-addr">{t('fiber.peer.rpc_addr')}</label>
+              </dt>
+              <dd>
+                <select name="rpc-addr" id="rpc-addr" onChange={handleRpcAddrSelect}>
+                  {peer.rpcListeningAddr.map(ra => {
+                    return (
+                      <option value={ra} key={ra}>
+                        {ra}
+                      </option>
+                    )
+                  })}
+                </select>
+                <button type="button" data-copy-text={peer.rpcListeningAddr}>
+                  <CopyIcon />
+                </button>
+                <a href={rpcAddr} title={rpcAddr} target="_blank" rel="noopener noreferrer">
+                  <OpenInNewWindowIcon />
+                </a>
+              </dd>
+            </dl>
+            {connectId ? (
+              <dl>
+                <dt>{t('fiber.peer.connect_id')}</dt>
+                <dd className={styles.connectId}>
+                  <Tooltip title={connectId}>
+                    <span>{connectId}</span>
+                  </Tooltip>
+                  <button type="button" data-copy-text={connectId}>
+                    <CopyIcon />
+                  </button>
+                </dd>
+              </dl>
+            ) : null}
+            <dl>
+              <dt>{t('fiber.peer.open_time')}</dt>
+              <dd>
+                <small>Coming soon</small>
+              </dd>
+            </dl>
+            <dl>
+              <dt>{t('fiber.peer.update_time')}</dt>
+              <dd>
+                <small>Coming soon</small>
+              </dd>
+            </dl>
+          </div>
           {connectId ? (
             <div>
               <canvas ref={qrRef} className={styles.qrcode} />
             </div>
           ) : null}
-          <dl>
-            <dt>{t('fiber.peer.open_time')}</dt>
-            <dd>
-              <small>Coming soon</small>
-            </dd>
-          </dl>
-          <dl>
-            <dt>{t('fiber.peer.update_time')}</dt>
-            <dd>
-              <small>Coming soon</small>
-            </dd>
-          </dl>
-        </div>
-        <div className={styles.channels}>
-          <h3>{`${t('fiber.peer.channels')}(${channels.length})`}</h3>
-          <table>
-            <thead>
-              <tr>
-                <th>{t('fiber.channel.channel_id')}</th>
-                <th>{t('fiber.channel.state')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {channels.map(c => {
-                return (
-                  <tr key={c.channelId}>
-                    <td>
-                      <Tooltip title={c.channelId}>
-                        <Link to={`/fiber/channels/${c.channelId}`} className="monospace">
-                          {`${c.channelId.slice(0, 10)}...${c.channelId.slice(-10)}`}
-                        </Link>
-                      </Tooltip>
-                    </td>
-                    <td>{c.stateName}</td>
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
         </div>
-        <div className={styles.transactions}>
-          <h3>Open | Close Transactions</h3>
-          <small>Coming soon</small>
+        <div className={styles.activities}>
+          <div className={styles.channels}>
+            <h3>{`${t('fiber.peer.channels')}(${channels.length})`}</h3>
+            <table>
+              <thead>
+                <tr>
+                  <th>{t('fiber.channel.channel_id')}</th>
+                  <th>{t('fiber.channel.state')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {channels.map(c => {
+                  return (
+                    <tr key={c.channelId}>
+                      <td>
+                        <Tooltip title={c.channelId}>
+                          <Link to={`/fiber/channels/${c.channelId}`} className="monospace">
+                            {`${c.channelId.slice(0, 10)}...${c.channelId.slice(-10)}`}
+                          </Link>
+                        </Tooltip>
+                      </td>
+                      <td>{c.stateName}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+          <div className={styles.transactions}>
+            <h3>Open | Close Transactions</h3>
+            <small>Coming soon</small>
+          </div>
         </div>
       </div>
     </Content>
diff --git a/src/services/ExplorerService/fetcher.ts b/src/services/ExplorerService/fetcher.ts
index d35b812df..21e109d99 100644
--- a/src/services/ExplorerService/fetcher.ts
+++ b/src/services/ExplorerService/fetcher.ts
@@ -1206,10 +1206,10 @@ export const apiFetcher = {
         toCamelcase<
           Response.Response<{
             fiberPeers: Fiber.Peer.ItemInList[]
-            // meta: {
-            //   total: number
-            //   pageSize: number
-            // }
+            meta: {
+              total: number
+              pageSize: number
+            }
           }>
         >(res.data),
       )