         </div>
 
         {unless @props.instance?.services
-          <div style={textAlign:'center', padding: 40}>
+          <Box alignContent='center' pad='large' align='center'>
             <h3>Service information will be displayed here as soon as the instance starts...</h3>
-          </div>
+          </Box>
         }
 
         {_.map @props.instance.services, (service, name) ->

            <Heading tag='h2'>{name}</Heading>
            <List>
              {li 'Created', moment(service.container?.created).fromNow()}
              {li 'State', service.state}
              {li 'FQDN', service.fqdn}
              {li 'Container name', service.container?.name}
              {li 'Ports', service.ports}
              {li 'Network', service.aux?.net?.state}
            </List>
          </Section>
        }

    appWithLink = =>
      iconLink "#{@props.instance.app.name}:#{@props.instance.app.version}", @props.onOpenAppPage

    renderStatus = (s) ->
      status = if (stat = s.health?.status) is 'unknown' then 'waiting for container to become healthy' else stat
      <span>
        {s.state} {if status then "(#{status})"}
      </span>

    renderNetwork = (net) ->
      if net
        ip = if net.ip? then ", ip: #{net.ip}" else ''
        status = if (stat = net.health?.status) is 'unknown' then 'waiting for container to become healthy' else stat
        <span>
          {net.state} ({status}{ip})
        </span>

    instanceHelper = Helpers.withInstance @props.instance
    <Split flex='left' priority='left'>
      <DetailPage title={@props.title} >
