diff --git a/src/client/components/player/Player.tsx b/src/client/components/player/Player.tsx
index 61081eb9..4c4f223d 100644
--- a/src/client/components/player/Player.tsx
+++ b/src/client/components/player/Player.tsx
@@ -69,7 +69,6 @@ const Player = (props: PlayerProps) => {
     }, [viewMode, setViewMode]);
 
     return (
-        <div>
             <article className={["player", "mb-2"].join(' ')}>
                 <div className="player__wrapper">
                     <button className="button toggle-playlist" onClick={toggleViewMode}>
@@ -87,7 +86,6 @@ const Player = (props: PlayerProps) => {
                     <PlayerInfo data={data} isVisible={viewMode === 'playlist'} />
                 </div>
             </article>
-        </div>
     );
 }
 
diff --git a/src/client/components/skeleton/SkeletonTitle.tsx b/src/client/components/skeleton/SkeletonTitle.tsx
index 797d255a..1344013f 100644
--- a/src/client/components/skeleton/SkeletonTitle.tsx
+++ b/src/client/components/skeleton/SkeletonTitle.tsx
@@ -1,8 +1,12 @@
 import React from 'react';
-
-const SkeletonTitle = () => {
+export interface SkeletonTitleProps {
+  show?: boolean
+}
+const SkeletonTitle = (props?: SkeletonTitleProps) => {
+    const {show = true} = props;
+    const cn = `max-w-sm animate-pulse${show ? '' : ' hidden'}`;
     return (
-        <div className="max-w-sm animate-pulse">
+        <div className={cn}>
             <div className="h-2.5 rounded-full bg-gray-400 w-48 mb-4"></div>
         </div>
     );
diff --git a/src/client/components/statusCard/ClientStatusCard.tsx b/src/client/components/statusCard/ClientStatusCard.tsx
index f9815f61..d7c4f920 100644
--- a/src/client/components/statusCard/ClientStatusCard.tsx
+++ b/src/client/components/statusCard/ClientStatusCard.tsx
@@ -14,8 +14,14 @@ const ClientStatusCard = (props: ClientStatusCardData) => {
     const {
         loading = false,
         data,
+        data: {
+            name,
+            type,
+            display,
+            status
+        } = {}
     } = props;
-    let header: string | undefined = undefined;
+    let header: string | undefined = display;
     let body = <SkeletonParagraph/>;
     if(data !== undefined) {
         const {
@@ -23,17 +29,17 @@ const ClientStatusCard = (props: ClientStatusCardData) => {
             name,
             type
         } = data;
-        header = `(Client) ${data.display} - ${data.name}`
+        if(type === 'lastfm' || type === 'listenbrainz')
+        header = `${display} (Client)`;
 
         // TODO links
         body = (<Fragment>
-            <div><b>Status: {data.status}</b></div>
             <div>Tracks Scrobbled (since app started): {data.tracksDiscovered}</div>
             {hasAuth ? <a target="_blank" href={`/api/source/auth?name=${name}&type=${type}`}>(Re)authenticate or initialize</a> : null}
         </Fragment>);
     }
     return (
-        <StatusCardSkeleton loading={loading} header={header}>
+        <StatusCardSkeleton loading={loading} title={header} subtitle={name} status={status}>
                 {body}
         </StatusCardSkeleton>
     );
diff --git a/src/client/components/statusCard/SourceStatusCard.tsx b/src/client/components/statusCard/SourceStatusCard.tsx
index 844d765c..ea0b9596 100644
--- a/src/client/components/statusCard/SourceStatusCard.tsx
+++ b/src/client/components/statusCard/SourceStatusCard.tsx
@@ -6,6 +6,7 @@ import {sourceAdapter} from "../../status/ducks";
 import {RootState} from "../../store";
 import {connect, ConnectedProps} from "react-redux";
 import Player from "../player/Player";
+import './statusCard.scss';
 
 export interface SourceStatusCardData extends StatusCardSkeletonData, PropsFromRedux {
     loading?: boolean
@@ -14,9 +15,14 @@ export interface SourceStatusCardData extends StatusCardSkeletonData, PropsFromR
 const SourceStatusCard = (props: SourceStatusCardData) => {
     const {
         loading = false,
-        data
+        data,
+        data: {
+            display,
+            name,
+            status,
+        } = {}
     } = props;
-    let header: string | undefined = undefined;
+    let header: string | undefined = display;
     let body = <SkeletonParagraph/>;
     const poll = useCallback(async () => {
         const params = new URLSearchParams({type: data.type, name: data.name});
@@ -26,7 +32,6 @@ const SourceStatusCard = (props: SourceStatusCardData) => {
     },[data]);
     if(data !== undefined)
     {
-        const className = data.type !== 'spotify' ? 'md:pt-6' : '';
         const {
             display,
             name,
@@ -39,14 +44,15 @@ const SourceStatusCard = (props: SourceStatusCardData) => {
             type,
             players = {}
         } = data;
-        header = `(Source) ${display} - ${name}`
+        if(type === 'listenbrainz' || type === 'lastfm') {
+            header = `${display} (Source)`;
+        }
 
         const platformIds = Object.keys(players);
 
         // TODO links
-        body = (<div>
+        body = (<div className="statusCardBody">
             {platformIds.map(x => <Player key={x} data={players[x]}/>)}
-            <div><b>Status: {status}</b></div>
             <div>Tracks Discovered (since app started): {tracksDiscovered}</div>
             {canPoll && (!hasAuth || authed) ? <div><Link to={`/recent?type=${type}&name=${name}`}>See recently played tracks returned by API</Link></div> : null}
             {canPoll && hasAuthInteraction ? <a target="_blank" href={`/api/source/auth?name=${name}&type=${type}`}>(Re)authenticate and (re)start polling</a> : null}
@@ -54,7 +60,7 @@ const SourceStatusCard = (props: SourceStatusCardData) => {
         </div>);
     }
     return (
-        <StatusCardSkeleton loading={loading} header={header}>
+        <StatusCardSkeleton loading={loading} title={header} subtitle={name} status={status}>
                 {body}
         </StatusCardSkeleton>
     );
diff --git a/src/client/components/statusCard/StatusCardSkeleton.tsx b/src/client/components/statusCard/StatusCardSkeleton.tsx
index 6250d654..b0df1b46 100644
--- a/src/client/components/statusCard/StatusCardSkeleton.tsx
+++ b/src/client/components/statusCard/StatusCardSkeleton.tsx
@@ -5,19 +5,34 @@ import SkeletonParagraph from "../skeleton/SkeletonParagraph";
 export interface StatusCardSkeletonData {
     loading?: boolean
     header?: string
+    title?: string
+    subtitle?: string
+    status?: string
 }
 
 const StatusCardSkeleton = (props: PropsWithChildren<StatusCardSkeletonData>) => {
     const {
         loading,
         header,
+        status = null,
+        title,
+        subtitle,
         children
     } = props || {};
 
+    const showLoading = loading || (header === undefined && title === undefined);
     return (
-        <div className="shadow-md rounded my-6 bg-gray-500">
-            <div className="p-3 font-semibold bg-gray-700">
-                <h3>{loading || header === undefined ? <SkeletonTitle/> : header}</h3>
+        <div className="shadow-md rounded bg-gray-500">
+            <div className="p-3 bg-gray-700">
+                <SkeletonTitle show={showLoading}/>
+                <div className={`flex ${showLoading ? 'hidden' :''}`}>
+                    <div className="flex-auto text-left">
+                        {header ? <div className="font-semibold">{header}</div> : null}
+                        {title ? <div className="font-semibold">{title}</div> : null}
+                        {subtitle ? <div className="text-sm">{subtitle}</div> : null}
+                    </div>
+                    <div className="flex-auto text-right">{status}</div>
+                </div>
             </div>
             <div className="p-3">
                 {loading ? <SkeletonParagraph/> : children}
diff --git a/src/client/components/statusCard/statusCard.scss b/src/client/components/statusCard/statusCard.scss
new file mode 100644
index 00000000..9e82fe21
--- /dev/null
+++ b/src/client/components/statusCard/statusCard.scss
@@ -0,0 +1,7 @@
+.statusCardBody {
+  article {
+    &:last-of-type {
+      margin-bottom: 1rem;
+    }
+  }
+}
diff --git a/src/client/status/StatusSection.tsx b/src/client/status/StatusSection.tsx
index 26c58884..7f6d4bb5 100644
--- a/src/client/status/StatusSection.tsx
+++ b/src/client/status/StatusSection.tsx
@@ -26,11 +26,11 @@ const StatusSection = (props: PropsFromRedux) => {
 
     return (
         <Fragment>
-            <div className="grid md:grid-cols-3 gap-5 grid-flow-dense">
+            <div className="grid md:grid-cols-3 gap-x-5 gap-y-4 grid-flow-dense">
                 {isLoading ? <StatusCardSkeleton loading={isLoading}/> : undefined}
                 {props.sourceIds.map(x => <SourceStatusCard id={x} key={x}/>)}
             </div>
-            <div className="grid md:grid-cols-3 gap-3">
+            <div className="grid md:grid-cols-3 mt-4 gap-x-5 gap-y-4">
                 {!isLoading ? props.clientIds.map(x => <ClientStatusCard id={x} key={x}/>) : null}
             </div>
         </Fragment>