diff --git a/src/locales/en.json b/src/locales/en.json
index cfd2acae6..68f6c528e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1087,7 +1087,17 @@
       },
       "channel": {
         "channel_id": "Channel ID",
-        "state": "State"
+        "fiber_peers": "Fiber Peers",
+        "state": "State",
+        "open_time": "Open Time",
+        "update_time": "Last Update Time",
+        "shutdown_time": "Shutdown Time",
+        "balance": "Balance",
+        "local": "Local",
+        "remote": "Remote",
+        "tlc_balance": "TLC Balance",
+        "offered": "Offered",
+        "received": "Received"
       }
     }
   }
diff --git a/src/pages/Fiber/Channel/index.module.scss b/src/pages/Fiber/Channel/index.module.scss
new file mode 100644
index 000000000..0ed140108
--- /dev/null
+++ b/src/pages/Fiber/Channel/index.module.scss
@@ -0,0 +1,91 @@
+@import '../../../styles//variables.module.scss';
+
+.container {
+  text-wrap: nowrap;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin: 24px 120px;
+  font-size: 1rem;
+
+  svg {
+    pointer-events: none;
+  }
+
+  dl {
+    display: flex;
+
+    dt,
+    dd {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin: 0;
+      padding: 0;
+    }
+
+    dt::after {
+      content: ':';
+      margin-right: 4px;
+    }
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    appearance: none;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+
+  .id {
+    overflow: hidden;
+
+    & > span:first-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 1;
+    }
+  }
+
+  .transactions {
+    margin-top: 16px;
+    border-top: 1px solid #ccc;
+    padding-top: 16px;
+
+    h3 {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  .peers {
+    display: flex;
+    flex-wrap: wrap;
+
+    .local,
+    .remote {
+      flex: 1 0 50%;
+      border: 1px solid #ccc;
+      padding: 32px;
+
+      dl:last-child {
+        margin: 0;
+      }
+    }
+  }
+
+  @media screen and (width < $extraLargeBreakPoint) {
+    margin: 24px 20px;
+  }
+
+  @media screen and (width < 1030px) {
+    font-size: 14px;
+  }
+}
diff --git a/src/pages/Fiber/Channel/index.tsx b/src/pages/Fiber/Channel/index.tsx
index 6da23d743..eb6782ff3 100644
--- a/src/pages/Fiber/Channel/index.tsx
+++ b/src/pages/Fiber/Channel/index.tsx
@@ -1,5 +1,147 @@
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { CopyIcon } from '@radix-ui/react-icons'
+import BigNumber from 'bignumber.js'
+import dayjs from 'dayjs'
+import Content from '../../../components/Content'
+import { useSetToast } from '../../../components/Toast'
+import Loading from '../../../components/Loading'
+import { explorerService } from '../../../services/ExplorerService'
+import styles from './index.module.scss'
+import { shannonToCkb } from '../../../utils/util'
+import { localeNumberString } from '../../../utils/number'
+
+const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
+
 const Channel = () => {
-  return <div>Channel</div>
+  const [t] = useTranslation()
+  const { id } = useParams<{ id: string }>()
+  const setToast = useSetToast()
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['fiber', 'channels', id],
+    queryFn: () => {
+      return explorerService.api.getFiberChannel(id)
+    },
+    enabled: !!id,
+  })
+
+  if (isLoading) {
+    return <Loading show />
+  }
+
+  if (!data) {
+    return <div>Fiber Peer Not Found</div>
+  }
+  const channel = data.data
+
+  const handleCopy = (e: React.SyntheticEvent) => {
+    const elm = e.target
+    if (!(elm instanceof HTMLElement)) return
+    const { copyText } = elm.dataset
+    if (!copyText) return
+    e.stopPropagation()
+    e.preventDefault()
+    navigator?.clipboard.writeText(copyText).then(() => setToast({ message: t('common.copied') }))
+  }
+
+  const totalBalance = BigNumber(channel.localBalance).plus(BigNumber(channel.remoteBalance))
+  const totalTLCBalance = BigNumber(channel.offeredTlcBalance).plus(BigNumber(channel.receivedTlcBalance))
+
+  return (
+    <Content>
+      <div className={styles.container} onClick={handleCopy}>
+        <div>
+          <dl>
+            <dt>{t('fiber.channel.channel_id')}</dt>
+            <dd className={styles.id}>
+              <span>{channel.channelId}</span>
+              <button type="button" data-copy-text={channel.channelId}>
+                <CopyIcon />
+              </button>
+            </dd>
+          </dl>
+          <dl>
+            <dt>{t('fiber.channel.state')}</dt>
+            <dd>{channel.stateName}</dd>
+          </dl>
+
+          <dl>
+            <dt>{t('fiber.channel.balance')}</dt>
+            <dd>{`${localeNumberString(
+              shannonToCkb(totalBalance.toFormat({ groupSeparator: '' })),
+            )} CKB(Total) | ${localeNumberString(
+              shannonToCkb(totalTLCBalance.toFormat({ groupSeparator: '' })),
+            )} CKB(TLC)`}</dd>
+          </dl>
+          <dl>
+            <dt>{t('fiber.channel.open_time')}</dt>
+            <dd>
+              <time dateTime={channel.createdAt}>{dayjs(channel.createdAt).format(TIME_TEMPLATE)}</time>
+            </dd>
+          </dl>
+          <dl>
+            <dt>{t('fiber.channel.update_time')}</dt>
+            <dd>
+              <time dateTime={channel.updatedAt}>{dayjs(channel.updatedAt).format(TIME_TEMPLATE)}</time>
+            </dd>
+          </dl>
+          {channel.shutdownAt ? (
+            <dl>
+              <dt>{t('fiber.channel.shutdown_time')}</dt>
+              <dd>
+                <time dateTime={channel.shutdownAt}>{dayjs(channel.shutdownAt).format(TIME_TEMPLATE)}</time>
+              </dd>
+            </dl>
+          ) : null}
+          <div className={styles.peers}>
+            <div className={styles.local}>
+              <dl>
+                <dt>Fiber Peer</dt>
+                <dd>
+                  <small>Coming soon(Local)</small>
+                </dd>
+              </dl>
+
+              <dl>
+                <dt>{t('fiber.channel.balance')}</dt>
+                <dd>{`${localeNumberString(shannonToCkb(channel.localBalance))} CKB`}</dd>
+              </dl>
+
+              <dl>
+                <dt>{t('fiber.channel.tlc_balance')}</dt>
+                <dd>{`${localeNumberString(shannonToCkb(channel.offeredTlcBalance))} CKB`}</dd>
+              </dl>
+            </div>
+
+            <div className={styles.remote}>
+              <dl>
+                <dt>Fiber Peer</dt>
+                <dd>
+                  <small>Coming soon(Remote)</small>
+                </dd>
+              </dl>
+
+              <dl>
+                <dt>{t('fiber.channel.balance')}</dt>
+                <dd>{`${localeNumberString(shannonToCkb(channel.remoteBalance))} CKB`}</dd>
+              </dl>
+
+              <dl>
+                <dt>{t('fiber.channel.tlc_balance')}</dt>
+                <dd>{`${localeNumberString(shannonToCkb(channel.receivedTlcBalance))} CKB`}</dd>
+              </dl>
+            </div>
+          </div>
+        </div>
+        <div className={styles.transactions}>
+          <h3>Open | Close Transactions</h3>
+          <div>Coming soon</div>
+        </div>
+      </div>
+    </Content>
+  )
 }
 
 export default Channel
diff --git a/src/pages/Fiber/Peer/index.module.scss b/src/pages/Fiber/Peer/index.module.scss
index 457ac40fb..2aae9fdbe 100644
--- a/src/pages/Fiber/Peer/index.module.scss
+++ b/src/pages/Fiber/Peer/index.module.scss
@@ -70,7 +70,33 @@
     }
   }
 
+  .id {
+    overflow: hidden;
+
+    & > span:first-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 1;
+    }
+  }
+
+  .channels,
+  .transactions {
+    margin-top: 16px;
+    border-top: 1px solid #ccc;
+    padding-top: 16px;
+
+    h3 {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
   @media screen and (width < $extraLargeBreakPoint) {
     margin: 24px 20px;
   }
+
+  @media screen and (width < 1030px) {
+    font-size: 14px;
+  }
 }
diff --git a/src/pages/Fiber/Peer/index.tsx b/src/pages/Fiber/Peer/index.tsx
index 5e2db3930..b474c791c 100644
--- a/src/pages/Fiber/Peer/index.tsx
+++ b/src/pages/Fiber/Peer/index.tsx
@@ -6,10 +6,6 @@ import { Tooltip } from 'antd'
 import Content from '../../../components/Content'
 import { explorerService } from '../../../services/ExplorerService'
 import { useSetToast } from '../../../components/Toast'
-// import type { Fiber } from '../../../services/ExplorerService/fetcher'
-// import { shannonToCkb } from '../../../utils/util'
-// import { localeNumberString } from '../../../utils/number'
-// import { parseNumericAbbr } from '../../../utils/chart'
 import styles from './index.module.scss'
 import Loading from '../../../components/Loading'
 
@@ -19,7 +15,7 @@ const Peer = () => {
   const setToast = useSetToast()
 
   const { data, isLoading } = useQuery({
-    queryKey: ['fiber', 'peer', id],
+    queryKey: ['fiber', 'peers', id],
     queryFn: () => {
       return explorerService.api.getFiberPeerDetail(id)
     },
@@ -51,8 +47,8 @@ const Peer = () => {
         <div>
           <dl>
             <dt>{t('fiber.peer.peer_id')}</dt>
-            <dd>
-              {peer.peerId}
+            <dd className={styles.id}>
+              <span>{peer.peerId}</span>
               <button type="button" data-copy-text={peer.peerId}>
                 <CopyIcon />
               </button>
@@ -85,8 +81,8 @@ const Peer = () => {
             </dd>
           </dl>
         </div>
-        <div>
-          <div>{`${t('fiber.peer.channels')}(${channels.length})`}</div>
+        <div className={styles.channels}>
+          <h3>{`${t('fiber.peer.channels')}(${channels.length})`}</h3>
           <table>
             <thead>
               <tr>
@@ -112,6 +108,10 @@ const Peer = () => {
             </tbody>
           </table>
         </div>
+        <div className={styles.transactions}>
+          <h3>Open | Close Transactions</h3>
+          <small>Coming soon</small>
+        </div>
       </div>
     </Content>
   )
diff --git a/src/pages/Fiber/PeerList/index.module.scss b/src/pages/Fiber/PeerList/index.module.scss
index 471327740..8706ec6c5 100644
--- a/src/pages/Fiber/PeerList/index.module.scss
+++ b/src/pages/Fiber/PeerList/index.module.scss
@@ -77,6 +77,11 @@
     }
   }
 
+  .balance {
+    display: flex;
+    flex-direction: column;
+  }
+
   @media screen and (width < $extraLargeBreakPoint) {
     margin: 24px 20px;
   }
@@ -127,3 +132,25 @@
     }
   }
 }
+
+.addFiberPeer {
+  width: min-content;
+  margin: 16px auto;
+
+  fieldset {
+    margin: 8px 0;
+  }
+
+  input {
+    width: 250px;
+    padding: 4px 8px;
+  }
+
+  button {
+    padding: 4px 16px;
+  }
+
+  @media screen and (width < 1030px) {
+    font-size: 14px;
+  }
+}
diff --git a/src/pages/Fiber/PeerList/index.tsx b/src/pages/Fiber/PeerList/index.tsx
index 14a93a01a..7131f0717 100644
--- a/src/pages/Fiber/PeerList/index.tsx
+++ b/src/pages/Fiber/PeerList/index.tsx
@@ -43,9 +43,12 @@ const fields = [
       const ckb = shannonToCkb(v)
       const amount = parseNumericAbbr(ckb)
       return (
-        <Tooltip title={`${localeNumberString(ckb)} CKB`}>
-          <span>{`${amount} CKB`}</span>
-        </Tooltip>
+        <div className={styles.balance}>
+          <Tooltip title={`${localeNumberString(ckb)} CKB`}>
+            <span>{`${amount} CKB`}</span>
+          </Tooltip>
+          <small>Share: coming soon</small>
+        </div>
       )
     },
   },
@@ -71,7 +74,9 @@ const fields = [
       return (
         <span className={styles.peerId}>
           <Tooltip title={v}>
-            <Link to={`/fiber/peers/${v}`} className="monospace">{`${v.slice(0, 8)}...${v.slice(-8)}`}</Link>
+            <Link to={`/fiber/peers/${v}`} className="monospace">
+              {v.length > 16 ? `${v.slice(0, 8)}...${v.slice(-8)}` : v}
+            </Link>
           </Tooltip>
           <button type="button" data-copy-text={v}>
             <CopyIcon />
@@ -106,7 +111,7 @@ const PeerList = () => {
   const [t] = useTranslation()
   const setToast = useSetToast()
 
-  const { data } = useQuery({
+  const { data, refetch: refetchList } = useQuery({
     queryKey: ['fiber', 'peers'],
     queryFn: () => explorerService.api.getFiberPeerList(),
   })
@@ -123,6 +128,30 @@ const PeerList = () => {
     navigator?.clipboard.writeText(copyText).then(() => setToast({ message: t('common.copied') }))
   }
 
+  const handleAddPeer = async (e: React.SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const form = e.currentTarget
+
+    const { peer_id, peer_name, rpc } = form
+    const params: Parameters<typeof explorerService.api.addFiberPeer>[0] = {
+      rpc: rpc instanceof HTMLInputElement ? rpc.value : '',
+      id: peer_id instanceof HTMLInputElement ? peer_id.value : '',
+      name: peer_name instanceof HTMLInputElement ? peer_name.value : undefined,
+    }
+
+    if (params.rpc && params.id) {
+      try {
+        await explorerService.api.addFiberPeer(params)
+        setToast({ message: 'submitted' })
+        refetchList()
+      } catch (e) {
+        const message = e instanceof Error ? e.message : JSON.stringify(e)
+        setToast({ message })
+      }
+    }
+  }
+
   return (
     <Content>
       <div className={styles.container} onClick={handleCopy}>
@@ -148,6 +177,21 @@ const PeerList = () => {
           </tbody>
         </table>
       </div>
+      <form onSubmit={handleAddPeer} className={styles.addFiberPeer}>
+        <fieldset>
+          <label htmlFor="peer_name">{t('fiber.peer.name')}</label>
+          <input id="peer_name" placeholder="Peer Alias" />
+        </fieldset>
+        <fieldset>
+          <label htmlFor="rpc">{t('fiber.peer.rpc_addr')}</label>
+          <input required id="rpc" placeholder="Peer RPC Address" />
+        </fieldset>
+        <fieldset>
+          <label htmlFor="peer_id">Peer ID</label>
+          <input required id="peer_id" placeholder="Peer ID" />
+        </fieldset>
+        <button type="submit">Submit</button>
+      </form>
     </Content>
   )
 }
diff --git a/src/services/ExplorerService/fetcher.ts b/src/services/ExplorerService/fetcher.ts
index e5c7602e0..4d04a7915 100644
--- a/src/services/ExplorerService/fetcher.ts
+++ b/src/services/ExplorerService/fetcher.ts
@@ -1222,7 +1222,27 @@ export const apiFetcher = {
   },
 
   getFiberChannel: (id: string) => {
-    return requesterV2.get(`/fiber/channels/${id}`).then(res => toCamelcase<Fiber.Channel.Detail>(res.data))
+    return requesterV2
+      .get(`/fiber/channels/${id}`)
+      .then(res => toCamelcase<Response.Response<Fiber.Channel.Detail>>(res.data))
+  },
+
+  addFiberPeer: (params: { rpc: string; id: string; name?: string }) => {
+    return requesterV2
+      .post(`/fiber/peers`, {
+        name: params.name,
+        rpc_listening_addr: params.rpc,
+        peer_id: params.id,
+      })
+      .catch(e => {
+        if (Array.isArray(e.response?.data)) {
+          const res = e.response.data[0]
+          if (res) {
+            throw new Error(res.title)
+          }
+        }
+        throw e
+      })
   },
 }