diff --git a/src/index.css b/src/index.css
index 8874cb4..ddfa114 100644
--- a/src/index.css
+++ b/src/index.css
@@ -154,6 +154,28 @@ div.zoom {
   padding: 0 15px 0 25px;
 }
 
+.details .ui.list .item > .list-icon-wrapper {
+  display: table-cell;
+  width: 20px;
+  text-align: center;
+  vertical-align: top;
+  padding-right: 4px;
+}
+
+.details .ui.list .item > .list-icon-wrapper > i.icon {
+  margin: 0;
+}
+
+
+.details .ui.list .item > .list-icon-wrapper + .content {
+  display: table-cell;
+  vertical-align: top;
+  padding-left: 8px;
+}
+
+
+
+
 .details .item-header {
   justify-content: space-between;
   display: flex;
diff --git a/src/sidepanel/config/config.tsx b/src/sidepanel/config/config.tsx
index 4abe4ef..437131a 100644
--- a/src/sidepanel/config/config.tsx
+++ b/src/sidepanel/config/config.tsx
@@ -118,247 +118,245 @@ export function ConfigPanel(props: {
   onChange: (config: Config) => void;
 }) {
   return (
-    <>
-      {SourceHead(props.gedcom)}
-      <Form className="details">
-        <Item.Group>
-          <Item>
-            <Item.Content>
-              <Header sub>
-                <FormattedMessage id="config.colors" defaultMessage="Colors" />
-              </Header>
-              <Form.Field className="no-margin">
-                <Checkbox
-                  radio
-                  label={
-                    <FormattedMessage
-                      tagName="label"
-                      id="config.colors.NO_COLOR"
-                      defaultMessage="none"
-                    />
-                  }
-                  name="checkboxRadioGroup"
-                  value="none"
-                  checked={props.config.color === ChartColors.NO_COLOR}
-                  onClick={() =>
-                    props.onChange({
-                      ...props.config,
-                      color: ChartColors.NO_COLOR,
-                    })
-                  }
-                />
-              </Form.Field>
-              <Form.Field className="no-margin">
-                <Checkbox
-                  radio
-                  label={
-                    <FormattedMessage
-                      tagName="label"
-                      id="config.colors.COLOR_BY_GENERATION"
-                      defaultMessage="by generation"
-                    />
-                  }
-                  name="checkboxRadioGroup"
-                  value="generation"
-                  checked={
-                    props.config.color === ChartColors.COLOR_BY_GENERATION
-                  }
-                  onClick={() =>
-                    props.onChange({
-                      ...props.config,
-                      color: ChartColors.COLOR_BY_GENERATION,
-                    })
-                  }
-                />
-              </Form.Field>
-              <Form.Field className="no-margin">
-                <Checkbox
-                  radio
-                  label={
-                    <FormattedMessage
-                      tagName="label"
-                      id="config.colors.COLOR_BY_SEX"
-                      defaultMessage="by sex"
-                    />
-                  }
-                  name="checkboxRadioGroup"
-                  value="gender"
-                  checked={props.config.color === ChartColors.COLOR_BY_SEX}
-                  onClick={() =>
-                    props.onChange({
-                      ...props.config,
-                      color: ChartColors.COLOR_BY_SEX,
-                    })
-                  }
-                />
-              </Form.Field>
-            </Item.Content>
-          </Item>
-          <Item>
-            <Item.Content>
-              <Header sub>
-                <FormattedMessage id="config.ids" defaultMessage="IDs" />
-              </Header>
-              <Form.Field className="no-margin">
-                <Checkbox
-                  radio
-                  label={
-                    <FormattedMessage
-                      tagName="label"
-                      id="config.ids.HIDE"
-                      defaultMessage="hide"
-                    />
-                  }
-                  name="checkboxRadioGroup"
-                  value="hide"
-                  checked={props.config.id === Ids.HIDE}
-                  onClick={() =>
-                    props.onChange({...props.config, id: Ids.HIDE})
-                  }
-                />
-              </Form.Field>
-              <Form.Field className="no-margin">
-                <Checkbox
-                  radio
-                  label={
-                    <FormattedMessage
-                      tagName="label"
-                      id="config.ids.SHOW"
-                      defaultMessage="show"
-                    />
-                  }
-                  name="checkboxRadioGroup"
-                  value="show"
-                  checked={props.config.id === Ids.SHOW}
-                  onClick={() =>
-                    props.onChange({...props.config, id: Ids.SHOW})
-                  }
-                />
-              </Form.Field>
-            </Item.Content>
-          </Item>
-          <Item>
-            <Item.Content>
-              <Header sub>
-                <FormattedMessage id="config.sex" defaultMessage="Sex" />
-              </Header>
-              <Form.Field className="no-margin">
-                <Checkbox
-                  radio
-                  label={
-                    <FormattedMessage
-                      tagName="label"
-                      id="config.sex.HIDE"
-                      defaultMessage="hide"
-                    />
-                  }
-                  name="checkboxRadioGroup"
-                  value="hide"
-                  checked={props.config.sex === Sex.HIDE}
-                  onClick={() =>
-                    props.onChange({...props.config, sex: Sex.HIDE})
-                  }
-                />
-              </Form.Field>
-              <Form.Field className="no-margin">
-                <Checkbox
-                  radio
-                  label={
-                    <FormattedMessage
-                      tagName="label"
-                      id="config.sex.SHOW"
-                      defaultMessage="show"
-                    />
-                  }
-                  name="checkboxRadioGroup"
-                  value="show"
-                  checked={props.config.sex === Sex.SHOW}
-                  onClick={() =>
-                    props.onChange({...props.config, sex: Sex.SHOW})
-                  }
-                />
-              </Form.Field>
-            </Item.Content>
-          </Item>
-          <Item>
-            <Item.Content>
-              <Header sub>
-                <FormattedMessage id="config.places" defaultMessage="Places" />
-              </Header>
-              <Form.Field className="no-margin">
-                <Checkbox
-                  radio
-                  label={
-                    <FormattedMessage
-                      tagName="label"
-                      id="config.places.HIDE"
-                      defaultMessage="hide"
-                    />
-                  }
-                  name="checkboxRadioGroup"
-                  value="hide"
-                  checked={props.config.place === PlaceDisplay.HIDE}
-                  onClick={() =>
-                    props.onChange({...props.config, place: PlaceDisplay.HIDE})
-                  }
-                />
-              </Form.Field>
-              <Form.Field className="no-margin">
-                <Checkbox
-                  radio
-                  label={
-                    <FormattedMessage
-                      tagName="label"
-                      id="config.places.SHORT"
-                      defaultMessage="short"
-                    />
-                  }
-                  name="checkboxRadioGroup"
-                  value="short"
-                  checked={props.config.place === PlaceDisplay.SHORT}
-                  onClick={() =>
-                    props.onChange({...props.config, place: PlaceDisplay.SHORT})
-                  }
-                />
-                {props.config.place === PlaceDisplay.SHORT && (
-                  <Input
-                    type="number"
-                    min={1}
-                    max={10}
-                    size="mini"
-                    style={{width: '4em', marginLeft: '1.5em'}}
-                    value={props.config.placeCount}
-                    onChange={(_e, {value}) => {
-                      const n = parseInt(value, 10);
-                      if (n >= 1) {
-                        props.onChange({...props.config, placeCount: n});
-                      }
-                    }}
+    <Form className="details">
+      <Item.Group>
+        {SourceHead(props.gedcom)}
+        <Item>
+          <Item.Content>
+            <Header sub>
+              <FormattedMessage id="config.colors" defaultMessage="Colors" />
+            </Header>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.colors.NO_COLOR"
+                    defaultMessage="none"
                   />
-                )}
-              </Form.Field>
-              <Form.Field className="no-margin">
-                <Checkbox
-                  radio
-                  label={
-                    <FormattedMessage
-                      tagName="label"
-                      id="config.places.FULL"
-                      defaultMessage="full"
-                    />
-                  }
-                  name="checkboxRadioGroup"
-                  value="full"
-                  checked={props.config.place === PlaceDisplay.FULL}
-                  onClick={() =>
-                    props.onChange({...props.config, place: PlaceDisplay.FULL})
-                  }
+                }
+                name="checkboxRadioGroup"
+                value="none"
+                checked={props.config.color === ChartColors.NO_COLOR}
+                onClick={() =>
+                  props.onChange({
+                    ...props.config,
+                    color: ChartColors.NO_COLOR,
+                  })
+                }
+              />
+            </Form.Field>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.colors.COLOR_BY_GENERATION"
+                    defaultMessage="by generation"
+                  />
+                }
+                name="checkboxRadioGroup"
+                value="generation"
+                checked={
+                  props.config.color === ChartColors.COLOR_BY_GENERATION
+                }
+                onClick={() =>
+                  props.onChange({
+                    ...props.config,
+                    color: ChartColors.COLOR_BY_GENERATION,
+                  })
+                }
+              />
+            </Form.Field>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.colors.COLOR_BY_SEX"
+                    defaultMessage="by sex"
+                  />
+                }
+                name="checkboxRadioGroup"
+                value="gender"
+                checked={props.config.color === ChartColors.COLOR_BY_SEX}
+                onClick={() =>
+                  props.onChange({
+                    ...props.config,
+                    color: ChartColors.COLOR_BY_SEX,
+                  })
+                }
+              />
+            </Form.Field>
+          </Item.Content>
+        </Item>
+        <Item>
+          <Item.Content>
+            <Header sub>
+              <FormattedMessage id="config.ids" defaultMessage="IDs" />
+            </Header>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.ids.HIDE"
+                    defaultMessage="hide"
+                  />
+                }
+                name="checkboxRadioGroup"
+                value="hide"
+                checked={props.config.id === Ids.HIDE}
+                onClick={() =>
+                  props.onChange({...props.config, id: Ids.HIDE})
+                }
+              />
+            </Form.Field>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.ids.SHOW"
+                    defaultMessage="show"
+                  />
+                }
+                name="checkboxRadioGroup"
+                value="show"
+                checked={props.config.id === Ids.SHOW}
+                onClick={() =>
+                  props.onChange({...props.config, id: Ids.SHOW})
+                }
+              />
+            </Form.Field>
+          </Item.Content>
+        </Item>
+        <Item>
+          <Item.Content>
+            <Header sub>
+              <FormattedMessage id="config.sex" defaultMessage="Sex" />
+            </Header>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.sex.HIDE"
+                    defaultMessage="hide"
+                  />
+                }
+                name="checkboxRadioGroup"
+                value="hide"
+                checked={props.config.sex === Sex.HIDE}
+                onClick={() =>
+                  props.onChange({...props.config, sex: Sex.HIDE})
+                }
+              />
+            </Form.Field>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.sex.SHOW"
+                    defaultMessage="show"
+                  />
+                }
+                name="checkboxRadioGroup"
+                value="show"
+                checked={props.config.sex === Sex.SHOW}
+                onClick={() =>
+                  props.onChange({...props.config, sex: Sex.SHOW})
+                }
+              />
+            </Form.Field>
+          </Item.Content>
+        </Item>
+        <Item>
+          <Item.Content>
+            <Header sub>
+              <FormattedMessage id="config.places" defaultMessage="Places" />
+            </Header>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.places.HIDE"
+                    defaultMessage="hide"
+                  />
+                }
+                name="checkboxRadioGroup"
+                value="hide"
+                checked={props.config.place === PlaceDisplay.HIDE}
+                onClick={() =>
+                  props.onChange({...props.config, place: PlaceDisplay.HIDE})
+                }
+              />
+            </Form.Field>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.places.SHORT"
+                    defaultMessage="short"
+                  />
+                }
+                name="checkboxRadioGroup"
+                value="short"
+                checked={props.config.place === PlaceDisplay.SHORT}
+                onClick={() =>
+                  props.onChange({...props.config, place: PlaceDisplay.SHORT})
+                }
+              />
+              {props.config.place === PlaceDisplay.SHORT && (
+                <Input
+                  type="number"
+                  min={1}
+                  max={10}
+                  size="mini"
+                  style={{width: '4em', marginLeft: '1.5em'}}
+                  value={props.config.placeCount}
+                  onChange={(_e, {value}) => {
+                    const n = parseInt(value, 10);
+                    if (n >= 1) {
+                      props.onChange({...props.config, placeCount: n});
+                    }
+                  }}
                 />
-              </Form.Field>
-            </Item.Content>
-          </Item>
-        </Item.Group>
-      </Form>
-    </>
+              )}
+            </Form.Field>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.places.FULL"
+                    defaultMessage="full"
+                  />
+                }
+                name="checkboxRadioGroup"
+                value="full"
+                checked={props.config.place === PlaceDisplay.FULL}
+                onClick={() =>
+                  props.onChange({...props.config, place: PlaceDisplay.FULL})
+                }
+              />
+            </Form.Field>
+          </Item.Content>
+        </Item>
+      </Item.Group>
+    </Form>
   );
 }
diff --git a/src/sidepanel/head/head.tsx b/src/sidepanel/head/head.tsx
index 793c6fd..dbe130c 100644
--- a/src/sidepanel/head/head.tsx
+++ b/src/sidepanel/head/head.tsx
@@ -1,5 +1,5 @@
 import {FormattedMessage, useIntl} from 'react-intl';
-import {Divider, Header, List} from 'semantic-ui-react';
+import {Divider, Header, Icon, Item, List} from 'semantic-ui-react';
 import {getDate} from 'topola';
 import {formatDateOrRange} from '../../util/date_util';
 import {dereference, GedcomData} from '../../util/gedcom_util';
@@ -66,63 +66,81 @@ export function SourceHead(gedcom: GedcomData) {
 
   // Icons: https://react.semantic-ui.com/elements/icon/
   return (
-    <>
-      <Header sub>
-        <FormattedMessage id="head.source" defaultMessage="Data source" />
-      </Header>
-      <List>
-        {sour_name && (
-          <List.Item>
-            <List.Icon name="edit" />
-            <List.Content>{sour_name}</List.Content>
-          </List.Item>
-        )}
+    <Item>
+      <Item.Content>
+        <Header sub>
+          <FormattedMessage id="head.source" defaultMessage="Data source" />
+        </Header>
+        <List>
+          {sour_name && (
+            <List.Item>
+              <div className="list-icon-wrapper">
+                <Icon name="edit" />
+              </div>
+              <List.Content>{sour_name}</List.Content>
+            </List.Item>
+          )}
 
-        {date && (
-          <List.Item>
-            <List.Icon name="calendar" />
-            <List.Content>{dateFormatted}</List.Content>
-          </List.Item>
-        )}
-        {file && (
-          <List.Item>
-            <List.Icon name="file" />
-            <List.Content>{filename}</List.Content>
-          </List.Item>
-        )}
-        {name && (
-          <List.Item>
-            <List.Icon name="user" />
-            <List.Content>{name}</List.Content>
-          </List.Item>
-        )}
-        {adr1 && (
-          <List.Item>
-            <List.Icon name="marker" />
-            <List.Content>{location}</List.Content>
-          </List.Item>
-        )}
-        {phon && (
-          <List.Item>
-            <List.Icon name="phone" />
-            <List.Content>{phon}</List.Content>
-          </List.Item>
-        )}
-        {email && (
-          <List.Item>
-            <List.Icon name="mail" />
-            <List.Content>{email}</List.Content>
-          </List.Item>
-        )}
-        {copr && (
-          <List.Item>
-            <List.Icon name="copyright" />
-            <List.Content>{copr}</List.Content>
-          </List.Item>
-        )}
-      </List>
+          {date && (
+            <List.Item>
+              <div className="list-icon-wrapper">
+                <Icon name="calendar" />
+              </div>
+              <List.Content>{dateFormatted}</List.Content>
+            </List.Item>
+          )}
+          {file && (
+            <List.Item>
+              <div className="list-icon-wrapper">
+                <Icon name="file" />
+              </div>
+              <List.Content>{filename}</List.Content>
+            </List.Item>
+          )}
+          {name && (
+            <List.Item>
+              <div className="list-icon-wrapper">
+                <Icon name="user" />
+              </div>
+              <List.Content>{name}</List.Content>
+            </List.Item>
+          )}
+          {adr1 && (
+            <List.Item>
+              <div className="list-icon-wrapper">
+                <Icon name="marker" />
+              </div>
+              <List.Content>{location}</List.Content>
+            </List.Item>
+          )}
+          {phon && (
+            <List.Item>
+              <div className="list-icon-wrapper">
+                <Icon name="phone" />
+              </div>
+              <List.Content>{phon}</List.Content>
+            </List.Item>
+          )}
+          {email && (
+            <List.Item>
+              <div className="list-icon-wrapper">
+                <Icon name="mail" />
+              </div>
+              <List.Content>{email}</List.Content>
+            </List.Item>
+          )}
+          {copr && (
+            <List.Item>
+              <div className="list-icon-wrapper">
+                <Icon name="copyright" />
+              </div>
+              <List.Content>{copr}</List.Content>
+            </List.Item>
+          )}
+        </List>
 
-      <Divider />
-    </>
+        <Divider />
+      </Item.Content>
+    </Item>
   );
 }
diff --git a/tests/config_visual.spec.ts-snapshots/config-state-default-visual-linux.png b/tests/config_visual.spec.ts-snapshots/config-state-default-visual-linux.png
index 32c4356..729903a 100644
Binary files a/tests/config_visual.spec.ts-snapshots/config-state-default-visual-linux.png and b/tests/config_visual.spec.ts-snapshots/config-state-default-visual-linux.png differ
diff --git a/tests/config_visual.spec.ts-snapshots/config-state-gender-no-ids-visual-linux.png b/tests/config_visual.spec.ts-snapshots/config-state-gender-no-ids-visual-linux.png
index 9e43108..d5fbfed 100644
Binary files a/tests/config_visual.spec.ts-snapshots/config-state-gender-no-ids-visual-linux.png and b/tests/config_visual.spec.ts-snapshots/config-state-gender-no-ids-visual-linux.png differ
diff --git a/tests/config_visual.spec.ts-snapshots/config-state-minimalist-visual-linux.png b/tests/config_visual.spec.ts-snapshots/config-state-minimalist-visual-linux.png
index a7aae39..3dd6965 100644
Binary files a/tests/config_visual.spec.ts-snapshots/config-state-minimalist-visual-linux.png and b/tests/config_visual.spec.ts-snapshots/config-state-minimalist-visual-linux.png differ
diff --git a/tests/config_visual.spec.ts-snapshots/config-state-places-hide-visual-linux.png b/tests/config_visual.spec.ts-snapshots/config-state-places-hide-visual-linux.png
index 1b8aece..83b6d71 100644
Binary files a/tests/config_visual.spec.ts-snapshots/config-state-places-hide-visual-linux.png and b/tests/config_visual.spec.ts-snapshots/config-state-places-hide-visual-linux.png differ
diff --git a/tests/config_visual.spec.ts-snapshots/config-state-places-short-1-visual-linux.png b/tests/config_visual.spec.ts-snapshots/config-state-places-short-1-visual-linux.png
index c4ec7be..3394a3c 100644
Binary files a/tests/config_visual.spec.ts-snapshots/config-state-places-short-1-visual-linux.png and b/tests/config_visual.spec.ts-snapshots/config-state-places-short-1-visual-linux.png differ
diff --git a/tests/config_visual.spec.ts-snapshots/config-state-places-short-default-visual-linux.png b/tests/config_visual.spec.ts-snapshots/config-state-places-short-default-visual-linux.png
index 6436c19..9d55551 100644
Binary files a/tests/config_visual.spec.ts-snapshots/config-state-places-short-default-visual-linux.png and b/tests/config_visual.spec.ts-snapshots/config-state-places-short-default-visual-linux.png differ