diff --git a/js-peer/src/components/connection-panel.tsx b/js-peer/src/components/connection-panel.tsx
index af798731..92cba639 100644
--- a/js-peer/src/components/connection-panel.tsx
+++ b/js-peer/src/components/connection-panel.tsx
@@ -13,6 +13,7 @@ import {
   ClipboardIcon,
   ClipboardDocumentCheckIcon,
 } from '@heroicons/react/24/outline'
+import { peerIdFromString } from '@libp2p/peer-id'
 
 export default function ConnectionPanel({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
   const { libp2p } = useLibp2pContext()
@@ -60,7 +61,14 @@ export default function ConnectionPanel({ isOpen, onClose }: { isOpen: boolean;
       }
       setDialling(true)
       try {
-        await connectToMultiaddr(libp2p)(multiaddr(maddr))
+        if (maddr.startsWith('/')) {
+          await connectToMultiaddr(libp2p)(multiaddr(maddr))
+          setMultiaddr('')
+        } else {
+          const peerId = peerIdFromString(maddr.trim())
+          await libp2p.dial(peerId)
+          setMultiaddr('')
+        }
       } catch (e: any) {
         setErr(e?.message ?? 'Error connecting')
       } finally {
@@ -187,7 +195,7 @@ export default function ConnectionPanel({ isOpen, onClose }: { isOpen: boolean;
 
           <div className="bg-white p-4 rounded-lg border border-gray-200">
             <label htmlFor="peer-id" className="block text-sm font-medium leading-6 text-gray-900">
-              Multiaddr to connect to
+              Multiaddr or PeerID to connect to
             </label>
             <div className="mt-2">
               <input
@@ -196,7 +204,7 @@ export default function ConnectionPanel({ isOpen, onClose }: { isOpen: boolean;
                 name="peer-id"
                 id="peer-id"
                 className="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                placeholder="12D3Koo..."
+                placeholder="/ip4/.../ip6/...or...12D3Koo..."
                 aria-describedby="multiaddr-id-description"
                 onChange={handleMultiaddrChange}
               />
@@ -210,7 +218,7 @@ export default function ConnectionPanel({ isOpen, onClose }: { isOpen: boolean;
               onClick={handleConnectToMultiaddr}
               disabled={dialling}
             >
-              {dialling && <Spinner />} Connect{dialling && 'ing'} to multiaddr
+              {dialling && <Spinner />} Connect{dialling && 'ing'}
             </button>
             {err && <p className="mt-2 text-sm text-red-500">{err}</p>}
           </div>
diff --git a/js-peer/src/context/ctx.tsx b/js-peer/src/context/ctx.tsx
index 56743506..7d43e671 100644
--- a/js-peer/src/context/ctx.tsx
+++ b/js-peer/src/context/ctx.tsx
@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
 import { startLibp2p } from '../lib/libp2p'
 import { ChatProvider } from './chat-ctx'
-import type { Libp2p, PubSub } from '@libp2p/interface'
+import type { Libp2p, PubSub, Connection } from '@libp2p/interface'
 import type { Identify } from '@libp2p/identify'
 import type { DirectMessage } from '@/lib/direct-message'
 import type { DelegatedRoutingV1HttpApiClient } from '@helia/delegated-routing-v1-http-api-client'
@@ -14,9 +14,13 @@ export type Libp2pType = Libp2p<{
   delegatedRouting: DelegatedRoutingV1HttpApiClient
 }>
 
-export const libp2pContext = createContext<{ libp2p: Libp2pType }>({
+export const libp2pContext = createContext<{
+  libp2p: Libp2pType
+  connections: Connection[]
+}>({
   // @ts-ignore to avoid having to check isn't undefined everywhere. Can't be undefined because children are conditionally rendered
   libp2p: undefined,
+  connections: [],
 })
 
 interface WrapperProps {
@@ -28,6 +32,22 @@ let loaded = false
 export function AppWrapper({ children }: WrapperProps) {
   const [libp2p, setLibp2p] = useState<Libp2pType | undefined>(undefined)
   const [error, setError] = useState('')
+  const [connections, setConnections] = useState<Connection[]>([])
+
+  useEffect(() => {
+    if (!libp2p) return
+    const onConnection = () => {
+      const connections = libp2p.getConnections()
+      setConnections(connections)
+    }
+    onConnection()
+    libp2p.addEventListener('connection:open', onConnection)
+    libp2p.addEventListener('connection:close', onConnection)
+    return () => {
+      libp2p.removeEventListener('connection:open', onConnection)
+      libp2p.removeEventListener('connection:close', onConnection)
+    }
+  }, [libp2p, setConnections])
 
   useEffect(() => {
     const init = async () => {
@@ -57,7 +77,7 @@ export function AppWrapper({ children }: WrapperProps) {
   }
 
   return (
-    <libp2pContext.Provider value={{ libp2p }}>
+    <libp2pContext.Provider value={{ libp2p, connections }}>
       <ChatProvider>{children}</ChatProvider>
     </libp2pContext.Provider>
   )
diff --git a/js-peer/src/pages/index.tsx b/js-peer/src/pages/index.tsx
index 2f9a0db9..961c506a 100644
--- a/js-peer/src/pages/index.tsx
+++ b/js-peer/src/pages/index.tsx
@@ -3,7 +3,6 @@ import Nav from '@/components/nav'
 import ChatContainer from '@/components/chat'
 import ConnectionPanel from '@/components/connection-panel'
 import { useState } from 'react'
-import { useLibp2pContext } from '@/context/ctx'
 import ConnectionInfoButton from '@/components/connection-info-button'
 
 export default function Chat() {