diff --git a/examples/react-graphql/client/src/layout/Layout.tsx b/examples/react-graphql/client/src/layout/Layout.tsx
index 664ee1838..0fa9bd022 100644
--- a/examples/react-graphql/client/src/layout/Layout.tsx
+++ b/examples/react-graphql/client/src/layout/Layout.tsx
@@ -74,6 +74,23 @@ const Dashboard: React.FC<DashboardProps> = () => {
         */}
 
         <Switch>
+          <Route path="/connections/user/:id">
+            <SidePanel title={'Identity'} closeUrl={'/connections'}>
+              <CredentialList />
+            </SidePanel>
+          </Route>
+          <Route
+            exact
+            path="/activity/credential/:id"
+            component={() => (
+              <SidePanel
+                title={'Credential'}
+                closeUrl={'/activity'}
+                query={queries.credential}
+                renderQuery={renderCredentialQuery}
+              ></SidePanel>
+            )}
+          ></Route>
           <Route path="/identities/user/:id">
             <SidePanel title={'Identity'} closeUrl={'/identities'}>
               <IdentityDetail />
diff --git a/examples/react-graphql/client/src/views/Connections/Connections.tsx b/examples/react-graphql/client/src/views/Connections/Connections.tsx
index f6da49eaf..b1a49ee41 100644
--- a/examples/react-graphql/client/src/views/Connections/Connections.tsx
+++ b/examples/react-graphql/client/src/views/Connections/Connections.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Box, Heading } from 'rimble-ui'
 import Page from '../../layout/Page'
 import Avatar from '../../components/Avatar/Avatar'
@@ -6,12 +6,21 @@ import * as queries from '../../gql/queries'
 import { useQuery, useLazyQuery } from 'react-apollo'
 import * as Types from '../../types'
 import Panel from '../../components/Panel/Panel'
+import { useHistory, useRouteMatch, useParams } from 'react-router-dom'
 
 const Component = () => {
   const { loading, data } = useQuery(queries.allIdentities)
-
+  const history = useHistory()
+  const { url } = useRouteMatch()
+  const [highlightedIdentity, highlightIdentity] = useState<string>()
   console.log(data?.identities)
 
+  const showIdentityDetail = (did: string) => {
+    highlightIdentity(did)
+
+    history.push(`${url}/user/${did}`)
+  }
+
   return (
     <Page title={'Connections'}>
       {/* <Avatar did={'ethr:did:0x145'} type={'circle'} size={60} /> */}
@@ -22,6 +31,7 @@ const Component = () => {
             {data?.identities?.map((id: Types.Identity) => {
               return (
                 <Box
+                  onClick={() => showIdentityDetail(id.did)}
                   className={'identity_row'}
                   key={id.did}
                   mb={2}