diff --git a/client/src/components/windows/settings/IntegrationSettingsEditor.tsx b/client/src/components/windows/settings/IntegrationSettingsEditor.tsx
index 18df746..0210d58 100644
--- a/client/src/components/windows/settings/IntegrationSettingsEditor.tsx
+++ b/client/src/components/windows/settings/IntegrationSettingsEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useAuth } from '../../../lib/useAuth';
-import { Box, CircularProgress, IconButton, Typography, FormControl, Select, MenuItem, TextField, Menu, Button } from '@material-ui/core';
+import { Box, CircularProgress, IconButton, Typography, FormControl, Select, MenuItem, TextField, Menu, Button, Card, CardHeader, CardContent, CardActions } from '@material-ui/core';
 import { getIntegrations, createIntegration, modifyIntegration, deleteIntegration } from '../../../lib/backend/integrations';
 import AddIcon from '@material-ui/icons/Add';
 import EditIcon from '@material-ui/icons/Edit';
@@ -31,93 +31,100 @@ function EditSpotifyClientCredentialsDetails(props: {
     onChangeClientSecret: (v: string) => void,
 }) {
     return <Box>
-        <Box display="flex" alignItems="center">
-            <Typography>Client id:</Typography>
-            {props.editing ?
-                <TextField
-                    variant="outlined"
-                    value={props.clientId || ""}
-                    label="Client Id:"
-                    onChange={(e: any) => props.onChangeClientId(e.target.value)}
-                /> :
-                <Typography>{props.clientId}</Typography>}
+        <Box mt={1} mb={1}>
+            <TextField
+                variant="outlined"
+                disabled={!props.editing}
+                value={props.clientId || ""}
+                label="Client Id:"
+                fullWidth
+                onChange={(e: any) => props.onChangeClientId(e.target.value)}
+            />
         </Box>
-        <Box display="flex" alignItems="center">
-            <Typography>Client secret:</Typography>
-            {props.editing ?
-                <TextField
-                    variant="outlined"
-                    value={props.clientSecret || ""}
-                    label="Client secret:"
-                    onChange={(e: any) => props.onChangeClientSecret(e.target.value)}
-                /> :
-                <Typography>{props.clientSecret}</Typography>}
+        <Box mt={1} mb={1}>
+            <TextField
+                variant="outlined"
+                disabled={!props.editing}
+                value={props.clientSecret || ""}
+                label="Client secret:"
+                fullWidth
+                onChange={(e: any) => props.onChangeClientSecret(e.target.value)}
+            />
         </Box>
     </Box>;
 }
 
 function EditIntegration(props: EditIntegrationProps) {
     let IntegrationHeaders: Record<any, any> = {
-        [serverApi.IntegrationType.SpotifyClientCredentials]: <Box display="flex" alignItems="center">
-            <StoreLinkIcon
-                style={{ height: '40px', width: '40px' }}
-                whichStore={ExternalStore.Spotify}
-            />
-            <Typography>Spotify</Typography>
-        </Box>
+        [serverApi.IntegrationType.SpotifyClientCredentials]:
+            <Box display="flex" alignItems="center">
+                <Box mr={1}><StoreLinkIcon
+                    style={{ height: '40px', width: '40px' }}
+                    whichStore={ExternalStore.Spotify}
+                /></Box>
+                <Typography>Spotify</Typography>
+            </Box>
     }
 
-    return <Box display="flex" flexDirection="column" border={1}>
-        {IntegrationHeaders[props.integration.type]}
-        <Box display="flex" alignItems="center">
-            <Typography>Name:</Typography>
-            {props.editing ?
+    return <Card variant="outlined">
+        <CardHeader
+            avatar={
+                IntegrationHeaders[props.integration.type]
+            }
+        >
+        </CardHeader>
+        <CardContent>
+            <Box mt={1} mb={1}>
                 <TextField
                     variant="outlined"
                     value={props.integration.name || ""}
                     label="Name"
+                    fullWidth
+                    disabled={!props.editing}
                     onChange={(e: any) => props.onChange({
                         ...props.integration,
                         name: e.target.value,
                     }, props.editing)}
-                /> :
-                <Typography>{props.integration.name}</Typography>}
-        </Box>
-        {props.integration.type === serverApi.IntegrationType.SpotifyClientCredentials &&
-            <EditSpotifyClientCredentialsDetails
-                clientId={props.integration.details.clientId}
-                clientSecret={props.integration.details.clientSecret}
-                editing={props.editing}
-                onChangeClientId={(v: string) => props.onChange({
-                    ...props.integration,
-                    details: {
-                        ...props.integration.details,
-                        clientId: v,
-                    }
-                }, props.editing)}
-                onChangeClientSecret={(v: string) => props.onChange({
-                    ...props.integration,
-                    details: {
-                        ...props.integration.details,
-                        clientSecret: v,
-                    }
-                }, props.editing)}
-            />
-        }
-        {!props.editing && !props.submitting && <IconButton
-            onClick={() => { props.onChange(props.integration, true); }}
-        ><EditIcon /></IconButton>}
-        {props.editing && !props.submitting && <IconButton
-            onClick={() => { props.onSubmit(); }}
-        ><CheckIcon /></IconButton>}
-        {!props.submitting && <IconButton
-            onClick={() => { props.onDelete(); }}
-        ><DeleteIcon /></IconButton>}
-        {!props.submitting && !props.editing && props.upstreamId !== null && <Button
-            onClick={() => testSpotify(props.upstreamId || 0)}
-        >Test</Button>}
-        {props.submitting && <CircularProgress />}
-    </Box >
+                />
+            </Box>
+            {props.integration.type === serverApi.IntegrationType.SpotifyClientCredentials &&
+                <EditSpotifyClientCredentialsDetails
+                    clientId={props.integration.details.clientId}
+                    clientSecret={props.integration.details.clientSecret}
+                    editing={props.editing}
+                    onChangeClientId={(v: string) => props.onChange({
+                        ...props.integration,
+                        details: {
+                            ...props.integration.details,
+                            clientId: v,
+                        }
+                    }, props.editing)}
+                    onChangeClientSecret={(v: string) => props.onChange({
+                        ...props.integration,
+                        details: {
+                            ...props.integration.details,
+                            clientSecret: v,
+                        }
+                    }, props.editing)}
+                />
+            }
+        </CardContent>
+        <CardActions>
+            {!props.editing && !props.submitting && <IconButton
+                onClick={() => { props.onChange(props.integration, true); }}
+            ><EditIcon /></IconButton>}
+            {props.editing && !props.submitting && <IconButton
+                onClick={() => { props.onSubmit(); }}
+            ><CheckIcon /></IconButton>}
+            {!props.submitting && <IconButton
+                onClick={() => { props.onDelete(); }}
+            ><DeleteIcon /></IconButton>}
+            {!props.submitting && !props.editing && props.upstreamId !== null && <Button
+                onClick={() => testSpotify(props.upstreamId || 0)}
+            >Test</Button>}
+            {props.submitting && <CircularProgress />}
+        </CardActions>
+    </Card>
 }
 
 function AddIntegrationMenu(props: {
@@ -198,10 +205,11 @@ export default function IntegrationSettingsEditor(props: {}) {
     }
 
     const deleteEditor = (state: EditorState) => {
-        if (!state.upstreamId) {
-            throw new Error('Cannot delete integration: has no upstream')
-        }
-        deleteIntegration(state.upstreamId).then((response: any) => {
+        let promise: Promise<void> = state.upstreamId ? 
+            deleteIntegration(state.upstreamId) :
+            (async () => {})();
+
+        promise.then((response: any) => {
             let cpy = _.cloneDeep(editors).filter(
                 (e: any) => e.id !== state.id
             );
@@ -225,62 +233,62 @@ export default function IntegrationSettingsEditor(props: {}) {
             });
     }, []);
 
-    // FIXME: add button should show a drop-down to choose a fixed integration type.
-    // Otherwise we need dynamic switching of the type's fields.
     return <>
         <Box>
             {editors === null && <CircularProgress />}
-            {editors && <>
-                {editors.map((state: EditorState) => <EditIntegration
-                    upstreamId={state.upstreamId}
-                    integration={state.integration}
-                    original={state.original}
-                    editing={state.editing}
-                    submitting={state.submitting}
-                    onChange={(p: serverApi.IntegrationDetailsResponse, editing: boolean) => {
-                        if (!editors) {
-                            throw new Error('cannot change editors before loading integrations.')
-                        }
-                        let cpy: EditorState[] = _.cloneDeep(editors);
-                        cpy.forEach((s: any) => {
-                            if (s.id === state.id) {
-                                s.integration = p;
-                                s.editing = editing;
+            {editors && <Box display="flex" flexDirection="column" alignItems="center" flexWrap="wrap">
+                {editors.map((state: EditorState) => <Box m={1} width="90%">
+                    <EditIntegration
+                        upstreamId={state.upstreamId}
+                        integration={state.integration}
+                        original={state.original}
+                        editing={state.editing}
+                        submitting={state.submitting}
+                        onChange={(p: serverApi.IntegrationDetailsResponse, editing: boolean) => {
+                            if (!editors) {
+                                throw new Error('cannot change editors before loading integrations.')
                             }
-                        })
-                        setEditors(cpy);
-                    }}
-                    onSubmit={() => {
-                        if (!editors) {
-                            throw new Error('cannot submit editors before loading integrations.')
-                        }
-                        let cpy: EditorState[] = _.cloneDeep(editors);
-                        cpy.forEach((s: any) => {
-                            if (s.id === state.id) {
-                                s.submitting = true;
+                            let cpy: EditorState[] = _.cloneDeep(editors);
+                            cpy.forEach((s: any) => {
+                                if (s.id === state.id) {
+                                    s.integration = p;
+                                    s.editing = editing;
+                                }
+                            })
+                            setEditors(cpy);
+                        }}
+                        onSubmit={() => {
+                            if (!editors) {
+                                throw new Error('cannot submit editors before loading integrations.')
                             }
-                        })
-                        setEditors(cpy);
-                        submitEditor(state);
-                    }}
-                    onDelete={() => {
-                        if (!editors) {
-                            throw new Error('cannot submit editors before loading integrations.')
-                        }
-                        let cpy: EditorState[] = _.cloneDeep(editors);
-                        cpy.forEach((s: any) => {
-                            if (s.id === state.id) {
-                                s.submitting = true;
+                            let cpy: EditorState[] = _.cloneDeep(editors);
+                            cpy.forEach((s: any) => {
+                                if (s.id === state.id) {
+                                    s.submitting = true;
+                                }
+                            })
+                            setEditors(cpy);
+                            submitEditor(state);
+                        }}
+                        onDelete={() => {
+                            if (!editors) {
+                                throw new Error('cannot submit editors before loading integrations.')
                             }
-                        })
-                        setEditors(cpy);
-                        deleteEditor(state);
-                    }}
-                />)}
+                            let cpy: EditorState[] = _.cloneDeep(editors);
+                            cpy.forEach((s: any) => {
+                                if (s.id === state.id) {
+                                    s.submitting = true;
+                                }
+                            })
+                            setEditors(cpy);
+                            deleteEditor(state);
+                        }}
+                    />
+                </Box>)}
                 <IconButton onClick={onOpenAddMenu}>
                     <AddIcon />
                 </IconButton>
-            </>}
+            </Box>}
         </Box>
         <AddIntegrationMenu
             position={addMenuPos}
diff --git a/client/src/lib/useAuth.tsx b/client/src/lib/useAuth.tsx
index d6b4995..f25dff4 100644
--- a/client/src/lib/useAuth.tsx
+++ b/client/src/lib/useAuth.tsx
@@ -38,8 +38,37 @@ export const useAuth = () => {
     return useContext(authContext);
 };
 
+function persistAuth(auth: AuthUser | null) {
+    let s = window.sessionStorage;
+
+    if(auth === null) {
+        s.removeItem('userId');
+        s.removeItem('userEmail');
+        return;
+    }
+
+    s.setItem('userId', auth.id.toString());
+    s.setItem('userEmail', auth.email);
+    // TODO icon
+}
+
+function loadAuth(): AuthUser | null {
+    let s = window.sessionStorage;
+    let id = s.getItem('userId');
+    let email = s.getItem('userEmail');
+
+    if (id && email) {
+        return {
+            id: parseInt(id),
+            email: email,
+            icon: <PersonIcon />
+        }
+    }
+    return null;
+}
+
 function useProvideAuth() {
-    const [user, setUser] = useState<AuthUser | null>(null);
+    const [user, setUser] = useState<AuthUser | null>(loadAuth());
 
     // TODO: password maybe shouldn't be encoded into the URL.
     const signin = (email: string, password: string) => {
@@ -59,6 +88,7 @@ function useProvideAuth() {
                 icon: <PersonIcon />,
             }
             setUser(user);
+            persistAuth(user);
             return user;
         })();
     };
@@ -89,6 +119,7 @@ function useProvideAuth() {
                 throw new Error("Failed to log out.");
             }
             setUser(null);
+            persistAuth(null);
         })();
     };