diff --git a/src/main/webui/src/ProposalEditorView/investigators/List.tsx b/src/main/webui/src/ProposalEditorView/investigators/List.tsx
index e5b52244..ad991654 100644
--- a/src/main/webui/src/ProposalEditorView/investigators/List.tsx
+++ b/src/main/webui/src/ProposalEditorView/investigators/List.tsx
@@ -6,7 +6,7 @@ import {
     useInvestigatorResourceGetInvestigators,
 } from "src/generated/proposalToolComponents.ts";
 import {useQueryClient} from "@tanstack/react-query";
-import {Box, Grid, Table, Text} from "@mantine/core";
+import {Box, Stack, Table, Text} from "@mantine/core";
 import {modals} from "@mantine/modals";
 import {randomId} from "@mantine/hooks";
 import DeleteButton from "src/commonButtons/delete";
@@ -57,10 +57,7 @@ function InvestigatorsPanel(): ReactElement {
     return (
         <PanelFrame>
             <EditorPanelHeader proposalCode={Number(selectedProposalCode)} panelHeading={"Investigators"}/>
-            <Grid>
-                <Grid.Col span={5}>
-                <AddButton toolTipLabel={"Add new"}
-                           onClick={handleAddNew} />
+                <Stack>
                     {data?.length === 0 ?
                         <div>Please add an investigator</div>:
                         isLoading ? (<div>Loading...</div>) :
@@ -81,8 +78,9 @@ function InvestigatorsPanel(): ReactElement {
                             }
                         </Table.Tbody>
                     </Table>}
-                </Grid.Col>
-            </Grid>
+                    <AddButton toolTipLabel={"Add new"}
+                               onClick={handleAddNew} />
+                </Stack>
         </PanelFrame>
     );
 }
diff --git a/src/main/webui/src/ProposalEditorView/investigators/New.tsx b/src/main/webui/src/ProposalEditorView/investigators/New.tsx
index ce00e8e0..17526e57 100644
--- a/src/main/webui/src/ProposalEditorView/investigators/New.tsx
+++ b/src/main/webui/src/ProposalEditorView/investigators/New.tsx
@@ -7,9 +7,9 @@ import {
 import {useNavigate, useParams} from "react-router-dom";
 import {useQueryClient} from "@tanstack/react-query";
 import {InvestigatorKind} from "src/generated/proposalToolSchemas.ts";
-import {Checkbox, Grid, Select} from "@mantine/core";
+import {Checkbox, Select, Stack} from "@mantine/core";
 import {useForm} from "@mantine/form";
-import {SubmitButton} from "src/commonButtons/save";
+import {FormSubmitButton} from "src/commonButtons/save";
 import DeleteButton from "src/commonButtons/delete";
 import { JSON_SPACES } from 'src/constants.tsx';
 import {EditorPanelHeader, PanelFrame} from "../../commonPanel/appearance.tsx";
@@ -35,6 +35,8 @@ function AddInvestigatorPanel(): ReactElement {
             forPhD: false,
             selectedInvestigator: 0},
         validate: {
+            type: (value) => (value != null ? null
+                : 'Please select an investigator type'),
             selectedInvestigator: (value) => (
                 value === 0 || value === null ? 'Please select an investigator' : null)
         }
@@ -107,35 +109,30 @@ function AddInvestigatorPanel(): ReactElement {
             <PanelFrame>
                 <EditorPanelHeader proposalCode={Number(selectedProposalCode)} panelHeading={"Add an investigator"} />
                 <form onSubmit={handleAdd}>
-                    <Select label={"Type"}
-                        data={typeData}
-                        {...form.getInputProps("type")}
-                    />
-                    <Checkbox
-                        label={"Is this for a PHD?"}
-                        {...form.getInputProps("forPhD")}
-                    />
-                    <Select
-                        label="Select an investigator"
-                        searchable
-                        data={searchData}
-                        {...form.getInputProps("selectedInvestigator")}
-                    />
-                    <Grid>
-                        <Grid.Col span={2}>
-                            <SubmitButton
-                                label={"Add"}
-                                toolTipLabel={"Add new investigator"}
-                                disabled={!form.isDirty() || !form.isValid()}
-                            />
-                        </Grid.Col>
-                        <Grid.Col span={1}>
-                            <DeleteButton
-                                label={"Cancel"}
-                                onClickEvent={handleCancel}
-                                toolTipLabel={"Do not save the new investigator"}/>
-                        </Grid.Col>
-                    </Grid>
+                    <Stack>
+                        <Select label={"Type"}
+                            data={typeData}
+                            {...form.getInputProps("type")}
+                        />
+                        <Checkbox
+                            label={"Is this for a PHD?"}
+                            {...form.getInputProps("forPhD")}
+                        />
+                        <Select
+                            label="Select an investigator"
+                            searchable
+                            data={searchData}
+                            {...form.getInputProps("selectedInvestigator")}
+                        />
+                        <FormSubmitButton
+                            label={"Add"}
+                            form={form}
+                        />
+                        <DeleteButton
+                            label={"Cancel"}
+                            onClickEvent={handleCancel}
+                            toolTipLabel={"Do not save the new investigator"}/>
+                    </Stack>
                 </form>
             </PanelFrame>
     )
diff --git a/src/main/webui/src/ProposalEditorView/justifications/justification.form.tsx b/src/main/webui/src/ProposalEditorView/justifications/justification.form.tsx
index 38f9e073..5646ff66 100644
--- a/src/main/webui/src/ProposalEditorView/justifications/justification.form.tsx
+++ b/src/main/webui/src/ProposalEditorView/justifications/justification.form.tsx
@@ -7,8 +7,8 @@ import {useForm, UseFormReturnType} from "@mantine/form";
 import {fetchProposalResourceUpdateJustification} from "src/generated/proposalToolComponents.ts";
 import {useParams} from "react-router-dom";
 import {useQueryClient} from "@tanstack/react-query";
-import {SubmitButton} from "src/commonButtons/save.tsx";
-import {notifySuccess} from "../../commonPanel/notifications.tsx";
+import {FormSubmitButton} from "src/commonButtons/save.tsx";
+import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
 import {PreviewJustification} from "./justification.preview.tsx";
 
 import Editor from "react-simple-code-editor";
@@ -17,6 +17,7 @@ import "prismjs/themes/prism.css";
 import "prismjs/components/prism-latex.js";
 import "prismjs/components/prism-rest.js";
 import "prismjs/components/prism-asciidoc.js";
+import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
 
 
 const JustificationTextArea = (form : UseFormReturnType<Justification>) => {
@@ -112,16 +113,16 @@ export default function JustificationForm(props: JustificationProps)
                 notifySuccess("Update successful", props.which + " justification updated");
             })
             .then(props.closeModal)
-            .catch(console.error);
+            .catch((error) => {
+                console.error(error);
+                notifyError("Update justification error", getErrorMessage(error))
+            });
     });
 
     return (
         <>
             <form onSubmit={handleSubmit}>
-                <SubmitButton
-                    toolTipLabel={"Save updates"}
-                    disabled={!form.isDirty() || !form.isValid()}
-                />
+                <FormSubmitButton form={form} />
                 <Grid span={10} grow>
                     <Grid.Col span={{base: 6, md: 8, lg: 9}}>
                         <JustificationTextArea {...form} />
diff --git a/src/main/webui/src/ProposalEditorView/observations/edit.group.tsx b/src/main/webui/src/ProposalEditorView/observations/edit.group.tsx
index 3f1153da..5ed3ad80 100644
--- a/src/main/webui/src/ProposalEditorView/observations/edit.group.tsx
+++ b/src/main/webui/src/ProposalEditorView/observations/edit.group.tsx
@@ -14,7 +14,7 @@ import {
     fetchObservationResourceReplaceTarget, fetchObservationResourceReplaceTechnicalGoal,
     fetchObservationResourceReplaceTimingWindow
 } from 'src/generated/proposalToolComponents.ts';
-import { SubmitButton } from 'src/commonButtons/save.tsx';
+import {FormSubmitButton} from 'src/commonButtons/save.tsx';
 import { useParams } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { FormEvent, ReactElement } from 'react';
@@ -267,11 +267,7 @@ export default function ObservationEditGroup(
         <>
             <form onSubmit={handleSubmit}>
                 <Group justify={'flex-start'} mt="md">
-                    <SubmitButton
-                        toolTipLabel={newObservation ? "save changes" : "save"}
-                        label={"Save"}
-                        disabled={!form.isDirty() || !form.isValid()}
-                    />
+                    <FormSubmitButton form={form} />
                 </Group>
                 <Grid  columns={5}>
                     <Grid.Col span={{base: 5, lg: 2}}>
diff --git a/src/main/webui/src/ProposalEditorView/proposal/Documents.tsx b/src/main/webui/src/ProposalEditorView/proposal/Documents.tsx
index b40ddb3a..0f7d0e06 100644
--- a/src/main/webui/src/ProposalEditorView/proposal/Documents.tsx
+++ b/src/main/webui/src/ProposalEditorView/proposal/Documents.tsx
@@ -5,7 +5,7 @@ import {
     useSupportingDocumentResourceGetSupportingDocuments
 } from "src/generated/proposalToolComponents";
 import {useParams} from "react-router-dom";
-import {Box, FileButton, Table, Text} from "@mantine/core";
+import {Box, FileButton, Stack, Table, Text} from "@mantine/core";
 import {useState} from "react";
 import {useQueryClient} from "@tanstack/react-query";
 import {modals} from "@mantine/modals";
@@ -84,7 +84,7 @@ const DocumentsPanel = () => {
     return (
         <PanelFrame>
             <EditorPanelHeader proposalCode={Number(selectedProposalCode)} panelHeading={"Documents"} />
-            <Box>
+            <Stack>
                 <Table>
                     <Table.Tbody>
                     {isLoading ? (
@@ -106,15 +106,16 @@ const DocumentsPanel = () => {
                     }
                     </Table.Tbody>
                 </Table>
-            </Box>
-            <Text fz="lg" fw={HEADER_FONT_WEIGHT}>Upload a document</Text>
-            <FileButton onChange={handleUpload}>
-                        {(props) => <UploadButton
-                            toolTipLabel="select a file from disk to upload"
-                            label={"Choose a file"}
-                            onClick={props.onClick}/>}
-            </FileButton>
-            <Result status={status} />
+
+                <Text fz="lg" fw={HEADER_FONT_WEIGHT}>Upload a document</Text>
+                <FileButton onChange={handleUpload}>
+                            {(props) => <UploadButton
+                                toolTipLabel="select a file from disk to upload"
+                                label={"Choose a file"}
+                                onClick={props.onClick}/>}
+                </FileButton>
+                <Result status={status} />
+            </Stack>
         </PanelFrame>
     );
 };
diff --git a/src/main/webui/src/ProposalEditorView/proposal/New.tsx b/src/main/webui/src/ProposalEditorView/proposal/New.tsx
index ff433e52..f332ab88 100644
--- a/src/main/webui/src/ProposalEditorView/proposal/New.tsx
+++ b/src/main/webui/src/ProposalEditorView/proposal/New.tsx
@@ -15,7 +15,7 @@ import {useNavigate} from "react-router-dom";
 import {Box, Container, Select, Text, Textarea, TextInput} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import {useQueryClient} from "@tanstack/react-query";
-import { SubmitButton } from 'src/commonButtons/save';
+import {FormSubmitButton} from 'src/commonButtons/save';
 import { MAX_CHARS_FOR_INPUTS, TEXTAREA_MAX_ROWS } from "src/constants";
 import MaxCharsForInputRemaining from "src/commonInputs/remainingCharacterCount.tsx";
 import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx";
@@ -95,7 +95,10 @@ const textFormatData = [
                 }
             })
             .then(() => setSubmitting(false))
-            .catch(console.log);
+            .catch((error) => {
+                console.log(error);
+                notifyError("Create proposal error", getErrorMessage(error))
+            });
     });
 
      return (
@@ -169,10 +172,9 @@ const textFormatData = [
                         {...form.getInputProps('technicalJustification.format')}
                     />
                 </Container>
-                <SubmitButton
+                <FormSubmitButton
+                    form={form}
                     label={"Create"}
-                    toolTipLabel={"Create new proposal"}
-                    disabled={!form.isDirty() || !form.isValid()}
                 />
             </form>
         </PanelFrame>
diff --git a/src/main/webui/src/ProposalEditorView/proposal/Submit.tsx b/src/main/webui/src/ProposalEditorView/proposal/Submit.tsx
index ff2268cc..1866cb9c 100644
--- a/src/main/webui/src/ProposalEditorView/proposal/Submit.tsx
+++ b/src/main/webui/src/ProposalEditorView/proposal/Submit.tsx
@@ -1,5 +1,5 @@
 import {ReactElement, useEffect, useState} from "react";
-import {Box, Select, Text} from "@mantine/core";
+import {Box, Select, Stack, Text} from "@mantine/core";
 import {
     fetchProposalCyclesResourceGetProposalCycleDates,
     fetchSubmittedProposalResourceSubmitProposal,
@@ -88,17 +88,19 @@ function SubmitPanel(): ReactElement {
             <ValidationOverview cycle={selectedCycle}/>
 
             <form onSubmit={trySubmitProposal}>
-                <Select label={"Cycle"}
-                    data={searchData}
-                    {...form.getInputProps("selectedCycle")}
-                    onChange={changeCycleDates}
-                />
-                <Text>Submission deadline {submissionDeadline}</Text>
-                <SubmitButton
-                    disabled={form.values.selectedCycle===0}
-                    label={"Submit proposal"}
-                    toolTipLabel={"Submit your proposal to the selected cycle"}
-                />
+                <Stack>
+                    <Select label={"Cycle"}
+                        data={searchData}
+                        {...form.getInputProps("selectedCycle")}
+                        onChange={changeCycleDates}
+                    />
+                    <Text>Submission deadline {submissionDeadline}</Text>
+                    <SubmitButton
+                        disabled={form.values.selectedCycle===0}
+                        label={"Submit proposal"}
+                        toolTipLabel={"Submit your proposal to the selected cycle"}
+                    />
+                </Stack>
             </form>
         </PanelFrame>
     )
diff --git a/src/main/webui/src/ProposalEditorView/proposal/Summary.tsx b/src/main/webui/src/ProposalEditorView/proposal/Summary.tsx
index f93d1e36..2757805e 100644
--- a/src/main/webui/src/ProposalEditorView/proposal/Summary.tsx
+++ b/src/main/webui/src/ProposalEditorView/proposal/Summary.tsx
@@ -6,15 +6,17 @@ import {
 } from "src/generated/proposalToolComponents";
 import {useMutation, useQueryClient} from "@tanstack/react-query";
 import {useParams} from "react-router-dom";
-import {Box, Textarea} from "@mantine/core";
+import {Box, Stack, Textarea} from "@mantine/core";
 import {useForm} from "@mantine/form";
-import { SubmitButton } from 'src/commonButtons/save';
+import {FormSubmitButton} from 'src/commonButtons/save';
 import {
     JSON_SPACES,
     MAX_CHARS_FOR_INPUTS, TEXTAREA_MAX_ROWS
 } from 'src/constants';
 import MaxCharsForInputRemaining from "src/commonInputs/remainingCharacterCount.tsx";
 import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx";
+import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
+import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
 
 function SummaryPanel() {
     const { selectedProposalCode } = useParams();
@@ -49,11 +51,14 @@ function SummaryPanel() {
                 setSubmitting(true);
             },
             onError: () => {
-                console.log("An error occurred trying to update the title")
+                console.error("An error occurred trying to update the title");
+                notifyError("Update failed", getErrorMessage(error))
             },
             onSuccess: () => {
                 queryClient.invalidateQueries()
-                    .then(() => setSubmitting(false))
+                    .then(() => setSubmitting(false));
+                notifySuccess("Update summary", "Update successful");
+                form.resetDirty();
             }
         }
     );
@@ -88,15 +93,13 @@ function SummaryPanel() {
                 <Box>Submitting request</Box> :
 
             <form onSubmit={updateSummary}>
-                <Textarea rows={TEXTAREA_MAX_ROWS}
-                          maxLength={MAX_CHARS_FOR_INPUTS}
-                          name="summary" {...form.getInputProps('summary')} />
-                <MaxCharsForInputRemaining length={form.values.summary.length} />
-                <br/>
-                <SubmitButton toolTipLabel={"Update summary"}
-                              label={"Save"}
-                              disabled={!form.isDirty() || !form.isValid()}
-                />
+                <Stack>
+                    <Textarea rows={TEXTAREA_MAX_ROWS}
+                              maxLength={MAX_CHARS_FOR_INPUTS}
+                              name="summary" {...form.getInputProps('summary')} />
+                    <MaxCharsForInputRemaining length={form.values.summary.length} />
+                    <FormSubmitButton form={form} />
+                </Stack>
             </form>
             }
         </PanelFrame>
diff --git a/src/main/webui/src/ProposalEditorView/proposal/Title.tsx b/src/main/webui/src/ProposalEditorView/proposal/Title.tsx
index ea6fe6f1..580bddc6 100644
--- a/src/main/webui/src/ProposalEditorView/proposal/Title.tsx
+++ b/src/main/webui/src/ProposalEditorView/proposal/Title.tsx
@@ -5,13 +5,15 @@ import {
     useProposalResourceGetObservingProposalTitle,
 } from "src/generated/proposalToolComponents";
 import {useMutation, useQueryClient} from "@tanstack/react-query";
-import {TextInput} from "@mantine/core";
+import {Stack, TextInput} from "@mantine/core";
 import {useParams} from "react-router-dom";
 import {useForm} from "@mantine/form";
-import { SubmitButton } from 'src/commonButtons/save';
+import {FormSubmitButton} from 'src/commonButtons/save';
 import { MAX_CHARS_FOR_INPUTS, JSON_SPACES } from 'src/constants';
 import MaxCharsForInputRemaining from "src/commonInputs/remainingCharacterCount.tsx";
 import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx";
+import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
+import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
 
 const titleFormJSON =  {
     initialValues: {title: "Loading..."},
@@ -49,14 +51,17 @@ function TitlePanel() {
         onMutate: () => {
             setSubmitting(true);
         },
-        onError: () => {
-            console.log("An error occurred trying to update the title")
+        onError: (error) => {
+            console.error("An error occurred trying to update the title");
+            notifyError("Update failed", getErrorMessage(error))
         },
         onSuccess: () => {
             //IMPL this is slightly limiting the invalidation -
             // some things should be ok still (users etc).
             queryClient.invalidateQueries(["pst","api","proposals"])
-                .then(()=> setSubmitting(false))
+                .then(() => setSubmitting(false));
+                notifySuccess("Update title", "Update successful");
+                form.resetDirty();
         },
     })
 
@@ -87,15 +92,13 @@ function TitlePanel() {
             { isLoading ? ("Loading..") :
                  submitting ? ("Submitting..."):
             <form onSubmit={updateTitle}>
-                <TextInput name="title"
-                           maxLength={MAX_CHARS_FOR_INPUTS}
-                           {...form.getInputProps('title')}/>
-                <MaxCharsForInputRemaining length={form.values.title.length} />
-                <br/>
-                <SubmitButton toolTipLabel={"Update title"}
-                              label={"Save"}
-                              disabled={!form.isDirty() || !form.isValid()}
-                />
+                <Stack>
+                    <TextInput name="title"
+                               maxLength={MAX_CHARS_FOR_INPUTS}
+                               {...form.getInputProps('title')}/>
+                    <MaxCharsForInputRemaining length={form.values.title.length} />
+                    <FormSubmitButton form={form} />
+                </Stack>
             </form>
             }
         </PanelFrame>
diff --git a/src/main/webui/src/ProposalEditorView/targets/New.tsx b/src/main/webui/src/ProposalEditorView/targets/New.tsx
index 2bb97099..4cb8bcad 100644
--- a/src/main/webui/src/ProposalEditorView/targets/New.tsx
+++ b/src/main/webui/src/ProposalEditorView/targets/New.tsx
@@ -1,4 +1,4 @@
-import {Modal, NumberInput, Select, TextInput, Grid} from "@mantine/core";
+import {Modal, NumberInput, Select, TextInput, Grid, Stack} from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useDisclosure } from "@mantine/hooks";
 import {
@@ -301,62 +301,62 @@ const TargetForm = (props: FormPropsType<newTargetData>): ReactElement => {
             {/* handle input */}
             <Grid.Col span={ 2 }>
                 <form onSubmit={handleSubmission}>
-                    <TextInput
-                        ref={targetNameRef}
-                        withAsterisk
-                        label="Name"
-                        placeholder="Name of target"
-                        {...form.getInputProps("TargetName")}
-                        onChange={(e: string) => {
-                            setNameUnique(true);
-                            if(form.getInputProps("TargetName").onChange)
-                                form.getInputProps("TargetName").onChange(e);
-                        }}
-                    />
-                    <DatabaseSearchButton
-                        label={"Lookup"}
-                        onClick={simbadLookup}
-                        toolTipLabel={"Search Simbad database"}/>
-                    <NumberInput
-                        required={true}
-                        label={"RA"}
-                        decimalScale={5}
-                        step={0.00001}
-                        min={0}
-                        max={360}
-                        allowNegative={false}
-                        suffix="°"
-                        {...form.getInputProps("RA")}
-                        onChange={(e) => {
-                            UpdateAladinRA(e);
-                            if (form.getInputProps("RA").onChange) {
-                                form.getInputProps("RA").onChange(e);
-                        }}}/>
-                    <NumberInput
-                        required={true}
-                        label={"Dec"}
-                        decimalScale={5}
-                        step={0.00001}
-                        min={-90}
-                        max={90}
-                        suffix="°"
-                        {...form.getInputProps("Dec")}
-                        onChange={(e) => {
-                            UpdateAladinDec(e);
-                            if (form.getInputProps("Dec").onChange) {
-                                form.getInputProps("Dec").onChange(e);
+                    <Stack>
+                        <TextInput
+                            ref={targetNameRef}
+                            withAsterisk
+                            label="Name"
+                            placeholder="Name of target"
+                            {...form.getInputProps("TargetName")}
+                            onChange={(e: string) => {
+                                setNameUnique(true);
+                                if(form.getInputProps("TargetName").onChange)
+                                    form.getInputProps("TargetName").onChange(e);
+                            }}
+                        />
+                        <DatabaseSearchButton
+                            label={"Lookup"}
+                            onClick={simbadLookup}
+                            toolTipLabel={"Search Simbad database"}/>
+                        <NumberInput
+                            required={true}
+                            label={"RA"}
+                            decimalScale={5}
+                            step={0.00001}
+                            min={0}
+                            max={360}
+                            allowNegative={false}
+                            suffix="°"
+                            {...form.getInputProps("RA")}
+                            onChange={(e) => {
+                                UpdateAladinRA(e);
+                                if (form.getInputProps("RA").onChange) {
+                                    form.getInputProps("RA").onChange(e);
                             }}}/>
-                    <Select
-                        label={"Coordinate System"}
-                        data={[{label:"J2000",value:"J2000"}]}
-                        {...form.getInputProps("SelectedEpoch")} />
-                    <div>
-                        <SubmitButton
-                            toolTipLabel={"Save this target"}
-                            label={"Add"}
-                            disabled={!form.isValid() ||
-                                      form.values.searching? true : undefined}/>
-                    </div>
+                        <NumberInput
+                            required={true}
+                            label={"Dec"}
+                            decimalScale={5}
+                            step={0.00001}
+                            min={-90}
+                            max={90}
+                            suffix="°"
+                            {...form.getInputProps("Dec")}
+                            onChange={(e) => {
+                                UpdateAladinDec(e);
+                                if (form.getInputProps("Dec").onChange) {
+                                    form.getInputProps("Dec").onChange(e);
+                                }}}/>
+                        <Select
+                            label={"Coordinate System"}
+                            data={[{label:"J2000",value:"J2000"}]}
+                            {...form.getInputProps("SelectedEpoch")} />
+                            <SubmitButton
+                                toolTipLabel={"Save this target"}
+                                label={"Add"}
+                                disabled={!form.isValid() ||
+                                          form.values.searching? true : undefined}/>
+                    </Stack>
                 </form>
             </Grid.Col>
         </Grid></>
diff --git a/src/main/webui/src/ProposalEditorView/targets/targetPanel.tsx b/src/main/webui/src/ProposalEditorView/targets/targetPanel.tsx
index f3f5e8bd..ee3b65b1 100644
--- a/src/main/webui/src/ProposalEditorView/targets/targetPanel.tsx
+++ b/src/main/webui/src/ProposalEditorView/targets/targetPanel.tsx
@@ -5,7 +5,7 @@ import {
 
 import AddTargetModal from "./New";
 import {useParams} from "react-router-dom";
-import { Box } from '@mantine/core';
+import {Box, Stack} from '@mantine/core';
 import { ReactElement } from 'react';
 import { JSON_SPACES } from 'src/constants.tsx';
 import { TargetTable } from './TargetTable.tsx';
@@ -50,8 +50,7 @@ export function TargetPanel(): ReactElement {
     return (
         <PanelFrame>
             <EditorPanelHeader proposalCode={Number(selectedProposalCode)} panelHeading={"Targets"} />
-            <Box>
-                <AddTargetModal/>
+            <Stack>
                 {data?.length === 0?
                     <div>Please add your targets</div> :
                     <TargetTable isLoading={isLoading}
@@ -61,7 +60,8 @@ export function TargetPanel(): ReactElement {
                                  showButtons={true}
                                  selectedTarget={undefined}/>
                 }
-            </Box>
+                <AddTargetModal/>
+            </Stack>
         </PanelFrame>
     );
 }
\ No newline at end of file
diff --git a/src/main/webui/src/ProposalEditorView/technicalGoals/edit.group.tsx b/src/main/webui/src/ProposalEditorView/technicalGoals/edit.group.tsx
index ef20e1b1..6674cfe2 100644
--- a/src/main/webui/src/ProposalEditorView/technicalGoals/edit.group.tsx
+++ b/src/main/webui/src/ProposalEditorView/technicalGoals/edit.group.tsx
@@ -17,7 +17,7 @@ import {
     fetchTechnicalGoalResourceAddTechnicalGoal,
     fetchTechnicalGoalResourceReplacePerformanceParameters, fetchTechnicalGoalResourceReplaceSpectrum
 } from "src/generated/proposalToolComponents.ts";
-import {SubmitButton} from "src/commonButtons/save.tsx";
+import {FormSubmitButton} from "src/commonButtons/save.tsx";
 import {
     convertToPerformanceParameters,
     convertToPerformanceParametersGui,
@@ -265,10 +265,7 @@ export default function TechnicalGoalEditGroup(
 
     return (
         <form onSubmit={handleSubmit}>
-            <SubmitButton
-                toolTipLabel={"save technical goal"}
-                disabled={!form.isDirty() || !form.isValid()}
-            />
+            <FormSubmitButton form={form} />
             <Grid columns={TOTAL_COLUMNS}>
                 <Grid.Col span={{base: TOTAL_COLUMNS, md: PERFORMANCE_COLUMNS}}>
                     <PerformanceParametersSection {...form}/>
diff --git a/src/main/webui/src/ProposalManagerView/TAC/tacNewMember.tsx b/src/main/webui/src/ProposalManagerView/TAC/tacNewMember.tsx
index 1d5ffc9f..841979f6 100644
--- a/src/main/webui/src/ProposalManagerView/TAC/tacNewMember.tsx
+++ b/src/main/webui/src/ProposalManagerView/TAC/tacNewMember.tsx
@@ -6,9 +6,9 @@ import {
 import {useNavigate, useParams} from "react-router-dom";
 import {useQueryClient} from "@tanstack/react-query";
 import {TacRole} from "src/generated/proposalToolSchemas.ts";
-import {Grid, Select} from "@mantine/core";
+import {Select, Stack} from "@mantine/core";
 import {useForm} from "@mantine/form";
-import {SubmitButton} from "src/commonButtons/save";
+import {FormSubmitButton} from "src/commonButtons/save";
 import DeleteButton from "src/commonButtons/delete";
 import { JSON_SPACES } from 'src/constants.tsx';
 import {ManagerPanelHeader, PanelFrame} from "../../commonPanel/appearance.tsx";
@@ -111,31 +111,27 @@ function CycleTACAddMemberPanel(): ReactElement {
         <PanelFrame>
             <ManagerPanelHeader proposalCycleCode={Number(selectedCycleCode)} panelHeading={"Add a reviewer"} />
             <form onSubmit={handleAdd}>
-                <Select label={"Role"}
-                        data={typeData}
-                        {...form.getInputProps("role")}
-                />
-                <Select
-                    label="Select a person"
-                    searchable
-                    data={searchData}
-                    {...form.getInputProps("selectedMember")}
-                />
-                <Grid>
-                    <Grid.Col span={2}>
-                        <SubmitButton
-                            label={"Add"}
-                            toolTipLabel={"Add new committee member"}
-                            disabled={!form.isDirty() || !form.isValid()}
-                        />
-                    </Grid.Col>
-                    <Grid.Col span={1}>
-                        <DeleteButton
-                            label={"Cancel"}
-                            onClickEvent={handleCancel}
-                            toolTipLabel={"Do not save the new committee member"}/>
-                    </Grid.Col>
-                </Grid>
+                <Stack>
+                    <Select label={"Role"}
+                            data={typeData}
+                            {...form.getInputProps("role")}
+                    />
+                    <Select
+                        label="Select a person"
+                        searchable
+                        data={searchData}
+                        {...form.getInputProps("selectedMember")}
+                    />
+                    <FormSubmitButton
+                        label={"Add"}
+                        form={form}
+                    />
+                    <DeleteButton
+                        label={"Cancel"}
+                        onClickEvent={handleCancel}
+                        toolTipLabel={"Do not save the new committee member"}
+                    />
+                </Stack>
             </form>
         </PanelFrame>
     )
diff --git a/src/main/webui/src/ProposalManagerView/TAC/tacPanel.tsx b/src/main/webui/src/ProposalManagerView/TAC/tacPanel.tsx
index 30f226dc..f7414d2d 100644
--- a/src/main/webui/src/ProposalManagerView/TAC/tacPanel.tsx
+++ b/src/main/webui/src/ProposalManagerView/TAC/tacPanel.tsx
@@ -1,5 +1,5 @@
 import {ReactElement, useState} from "react";
-import {Box, Grid, Table, Text} from "@mantine/core";
+import {Box, Stack, Table, Text} from "@mantine/core";
 import AddButton from "../../commonButtons/add.tsx";
 import {randomId} from "@mantine/hooks";
 import {useNavigate, useParams} from "react-router-dom";
@@ -48,32 +48,30 @@ export default function CycleTACPanel() : ReactElement {
     return (
         <PanelFrame>
             <ManagerPanelHeader proposalCycleCode={Number(selectedCycleCode)} panelHeading={"Time Allocation Committee"}/>
-            <Grid>
-                <Grid.Col span={5}>
-                    <AddButton toolTipLabel={"Add new"}
-                               onClick={handleAddNew} />
-                    {data?.length === 0 ?
-                        <div>Please add a committee member</div>:
-                        isLoading ? (<div>Loading...</div>) :
-                            <Table>
-                                <MembersHeader/>
-                                <Table.Tbody>
-                                    {data?.map((item) => {
-                                        if(item.dbid !== undefined) {
-                                            return (<TACMemberRow dbid={item.dbid}
-                                                                      key={item.dbid}/>)
-                                        } else {
-                                            return (
-                                                <Box key={randomId()}>
-                                                    Undefined Investigator!
-                                                </Box>)
-                                        }
-                                    })
+            <Stack>
+                <AddButton toolTipLabel={"Add new"}
+                           onClick={handleAddNew} />
+                {data?.length === 0 ?
+                    <Box>Please add a committee member</Box>:
+                    isLoading ? (<Box>Loading...</Box>) :
+                        <Table>
+                            <MembersHeader/>
+                            <Table.Tbody>
+                                {data?.map((item) => {
+                                    if(item.dbid !== undefined) {
+                                        return (<TACMemberRow dbid={item.dbid}
+                                                                  key={item.dbid}/>)
+                                    } else {
+                                        return (
+                                            <Box key={randomId()}>
+                                                Undefined Investigator!
+                                            </Box>)
                                     }
-                                </Table.Tbody>
-                            </Table>}
-                </Grid.Col>
-            </Grid>
+                                })
+                                }
+                            </Table.Tbody>
+                        </Table>}
+            </Stack>
 
         </PanelFrame>
     )
diff --git a/src/main/webui/src/ProposalManagerView/availableResources/availableResources.form.tsx b/src/main/webui/src/ProposalManagerView/availableResources/availableResources.form.tsx
index 00a0018c..7c9eff88 100644
--- a/src/main/webui/src/ProposalManagerView/availableResources/availableResources.form.tsx
+++ b/src/main/webui/src/ProposalManagerView/availableResources/availableResources.form.tsx
@@ -1,7 +1,7 @@
 import {ReactElement, useEffect, useState} from "react";
 import {useForm} from "@mantine/form";
 import {AvailableResourcesProps} from "./availableResourcesPanel.tsx";
-import {SubmitButton} from "../../commonButtons/save.tsx";
+import {FormSubmitButton} from "../../commonButtons/save.tsx";
 import {NumberInput, Select, Stack} from "@mantine/core";
 import {
     fetchAvailableResourcesResourceAddCycleResource,
@@ -128,10 +128,7 @@ export default function AvailableResourcesForm(props: AvailableResourcesProps) :
                     data={resourceTypeData}
                     {...form.getInputProps('resourceTypeId')}
                 />
-                <SubmitButton
-                    toolTipLabel={"save resource"}
-                    disabled={!form.isDirty() || !form.isValid()}
-                />
+                <FormSubmitButton form={form} />
             </Stack>
         </form>
     )
diff --git a/src/main/webui/src/ProposalManagerView/availableResources/resourceType.form.tsx b/src/main/webui/src/ProposalManagerView/availableResources/resourceType.form.tsx
index b9cfe3ce..4a4cbf7c 100644
--- a/src/main/webui/src/ProposalManagerView/availableResources/resourceType.form.tsx
+++ b/src/main/webui/src/ProposalManagerView/availableResources/resourceType.form.tsx
@@ -6,7 +6,7 @@ import {ResourceTypeFormValues} from "./resourceType.modal.tsx";
 import {fetchResourceTypeResourceAddNewResourceType} from "../../generated/proposalToolComponents.ts";
 import {useQueryClient} from "@tanstack/react-query";
 import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
-import {SubmitButton} from "../../commonButtons/save.tsx";
+import {FormSubmitButton} from "../../commonButtons/save.tsx";
 import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
 
 export default function ResourceTypeForm(props: ResourceTypeFormValues) : ReactElement {
@@ -71,10 +71,7 @@ export default function ResourceTypeForm(props: ResourceTypeFormValues) : ReactE
                     placeholder={"e.g. No. of cores"}
                     {...form.getInputProps('unit')}
                 />
-                <SubmitButton
-                    toolTipLabel={"Save new resource type"}
-                    disabled={!form.isDirty() || !form.isValid()}
-                />
+                <FormSubmitButton form={form} />
             </Stack>
         </form>
     )
diff --git a/src/main/webui/src/ProposalManagerView/proposalCycle.new.form.tsx b/src/main/webui/src/ProposalManagerView/proposalCycle.new.form.tsx
index 85d6a4e2..7f5e2554 100644
--- a/src/main/webui/src/ProposalManagerView/proposalCycle.new.form.tsx
+++ b/src/main/webui/src/ProposalManagerView/proposalCycle.new.form.tsx
@@ -1,5 +1,5 @@
 import {ReactElement, useEffect, useState} from "react";
-import {SubmitButton} from "../commonButtons/save.tsx";
+import {FormSubmitButton} from "../commonButtons/save.tsx";
 import {useForm} from "@mantine/form";
 import {ObjectIdentifier, ProposalCycle} from "../generated/proposalToolSchemas.ts";
 import {Group, Select, Stack, Text, TextInput} from "@mantine/core";
@@ -100,7 +100,10 @@ export default function NewCycleForm({closeModal}: NewCycleFormProps): ReactElem
         fetchProposalCyclesResourceCreateProposalCycle({body: newCycle})
             .then(()=> queryClient.invalidateQueries())
             .then(() => notifySuccess("Success", "Proposal Cycle " + newCycle.title + " created"))
-            .catch(console.error);
+            .catch((error) => {
+                console.error(error);
+                notifyError("Create cycle error", getErrorMessage(error))
+            });
 
         closeModal && closeModal();
     }
@@ -153,10 +156,9 @@ export default function NewCycleForm({closeModal}: NewCycleFormProps): ReactElem
                         minDate={new Date()}
                         {...form.getInputProps('sessionEnd')}
                     />
-                    <SubmitButton
+                    <FormSubmitButton
                         label={"Create Proposal Cycle"}
-                        toolTipLabel={"saves the proposal cycle"}
-                        disabled={!form.isValid()}
+                        form={form}
                     />
                 </Stack>
             </DatesProvider>
diff --git a/src/main/webui/src/ProposalManagerView/proposalCycle/dates.tsx b/src/main/webui/src/ProposalManagerView/proposalCycle/dates.tsx
index 6a63676b..cf75a5b9 100644
--- a/src/main/webui/src/ProposalManagerView/proposalCycle/dates.tsx
+++ b/src/main/webui/src/ProposalManagerView/proposalCycle/dates.tsx
@@ -2,7 +2,7 @@ import {ReactElement, useEffect, useState} from "react";
 import {Group, Stack, Text} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import {DatesProvider, DateTimePicker} from "@mantine/dates";
-import {SubmitButton} from "../../commonButtons/save.tsx";
+import {FormSubmitButton} from "../../commonButtons/save.tsx";
 import {useParams} from "react-router-dom";
 import {
     fetchProposalCyclesResourceReplaceCycleDeadline,
@@ -13,6 +13,7 @@ import {
 import {JSON_SPACES} from "../../constants.tsx";
 import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx";
 import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
+import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
 
 export default function CycleDatesPanel() : ReactElement {
     interface updateDatesForm {
@@ -95,7 +96,8 @@ export default function CycleDatesPanel() : ReactElement {
                 notifySuccess("Update dates", "Changes saved");
                 form.resetDirty();
             })
-            .catch((fault)=>notifyError("Update dates", "Error saving " + fault))
+            .catch((fault)=>notifyError("Update dates", "Error saving "
+                + getErrorMessage(fault)))
     });
 
     return (
@@ -129,11 +131,7 @@ export default function CycleDatesPanel() : ReactElement {
                             minDate={new Date()}
                             {...form.getInputProps('sessionEnd')}
                         />
-                        <SubmitButton
-                            label={"Save"}
-                            toolTipLabel={"Update proposal cycle dates"}
-                            disabled={!form.isDirty() || !form.isValid()}
-                        />
+                        <FormSubmitButton form={form} />
                     </Stack>
                 </DatesProvider>
 
diff --git a/src/main/webui/src/ProposalManagerView/proposalCycle/observatory.tsx b/src/main/webui/src/ProposalManagerView/proposalCycle/observatory.tsx
index 183846c2..73e10d7e 100644
--- a/src/main/webui/src/ProposalManagerView/proposalCycle/observatory.tsx
+++ b/src/main/webui/src/ProposalManagerView/proposalCycle/observatory.tsx
@@ -1,5 +1,5 @@
 import {ReactElement, useEffect, useState} from "react";
-import {Select, Text} from "@mantine/core";
+import {Select, Stack, Text} from "@mantine/core";
 import {ManagerPanelHeader, PanelFrame} from "../../commonPanel/appearance.tsx";
 import {useParams} from "react-router-dom";
 import {
@@ -10,7 +10,7 @@ import {
 import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
 import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
 import {useForm} from "@mantine/form";
-import {SubmitButton} from "../../commonButtons/save.tsx";
+import {FormSubmitButton} from "../../commonButtons/save.tsx";
 
 export default function CycleObservatoryPanel() : ReactElement {
     const {selectedCycleCode} = useParams();
@@ -49,8 +49,11 @@ export default function CycleObservatoryPanel() : ReactElement {
                     //form.setInitialValues({selectedObservatory: Number(observatory?._id)});
                     setFormReady(true);
                 })
-                .catch((error) => notifyError("Failed to load proposal cycle details",
-                    getErrorMessage(error)))
+                .catch((error) => {
+                    console.error(error);
+                    notifyError("Failed to load proposal cycle details",
+                        getErrorMessage(error))
+                })
 
         }
     }, [observatories.status, observatories.data]);
@@ -66,11 +69,14 @@ export default function CycleObservatoryPanel() : ReactElement {
                 };
 
         fetchProposalCyclesResourceReplaceCycleObservatory(newObservatory)
-            .then(()=>
-                notifySuccess("Update observatory", "Changes saved")
+            .then(()=> {
+                    notifySuccess("Update observatory", "Changes saved");
+                    form.resetDirty();
+                }
             )
             .catch((error) => {
-                notifyError("Error updating observatory", "Cause: "+getErrorMessage(error))
+                notifyError("Error updating observatory", "Cause: "
+                    + getErrorMessage(error))
             })
     })
 
@@ -81,15 +87,15 @@ export default function CycleObservatoryPanel() : ReactElement {
 
             {formReady && (
             <form onSubmit={updateObservatory}>
-                <Select
-                    data = {observatorySearchData}
-                    {...form.getInputProps("selectedObservatory")}
-                />
-                <SubmitButton toolTipLabel={"Change observatory"}
-                              disabled={!form.isDirty() || !form.isValid()}
-                              />
+                <Stack>
+                    <Select
+                        data = {observatorySearchData}
+                        allowDeselect={false}
+                        {...form.getInputProps("selectedObservatory")}
+                    />
+                    <FormSubmitButton form={form} label={"Change observatory"}/>
+                </Stack>
             </form>)}
-
         </PanelFrame>
     )
 }
\ No newline at end of file
diff --git a/src/main/webui/src/ProposalManagerView/proposalCycle/title.tsx b/src/main/webui/src/ProposalManagerView/proposalCycle/title.tsx
index e76b36f6..90b5101d 100644
--- a/src/main/webui/src/ProposalManagerView/proposalCycle/title.tsx
+++ b/src/main/webui/src/ProposalManagerView/proposalCycle/title.tsx
@@ -1,5 +1,5 @@
 import {ReactElement, useEffect, useState} from "react";
-import {TextInput} from "@mantine/core";
+import {Stack, TextInput} from "@mantine/core";
 import {useParams} from "react-router-dom";
 import {
     fetchProposalCyclesResourceReplaceCycleTitle,
@@ -10,8 +10,10 @@ import {useForm} from "@mantine/form";
 import {useMutation, useQueryClient} from "@tanstack/react-query";
 import {JSON_SPACES, MAX_CHARS_FOR_INPUTS} from "../../constants.tsx";
 import MaxCharsForInputRemaining from "../../commonInputs/remainingCharacterCount.tsx";
-import {SubmitButton} from "../../commonButtons/save.tsx";
+import {FormSubmitButton} from "../../commonButtons/save.tsx";
 import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx";
+import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
+import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
 
 const cycleTitleFormJSON =  {
     initialValues: {title: "Loading..."},
@@ -56,11 +58,14 @@ export default function CycleTitlePanel() : ReactElement {
             setSubmitting(true);
         },
         onError: () => {
-            console.log("An error occurred trying to update the title")
+            console.error("An error occurred trying to update the title");
+            notifyError("Update failed", getErrorMessage(error))
         },
         onSuccess: () => {
             queryClient.invalidateQueries(["pst", "api", "proposalCycles"])
-                .then(()=> setSubmitting(false))
+                .then(()=> setSubmitting(false));
+            notifySuccess("Update title", "Update successful");
+            form.resetDirty();
         },
     })
 
@@ -91,15 +96,13 @@ export default function CycleTitlePanel() : ReactElement {
             { isLoading ? ("Loading..") :
                 submitting ? ("Submitting..."):
                     <form onSubmit={updateTitle}>
-                        <TextInput name="title"
-                                   maxLength={MAX_CHARS_FOR_INPUTS}
-                                   {...form.getInputProps('title')}/>
-                        <MaxCharsForInputRemaining length={form.values.title.length} />
-                        <br/>
-                        <SubmitButton toolTipLabel={"Update proposal cycle title"}
-                                      label={"Save"}
-                                      disabled={!form.isDirty() || !form.isValid()}
-                        />
+                        <Stack>
+                            <TextInput name="title"
+                                       maxLength={MAX_CHARS_FOR_INPUTS}
+                                       {...form.getInputProps('title')}/>
+                            <MaxCharsForInputRemaining length={form.values.title.length} />
+                            <FormSubmitButton form={form} />
+                        </Stack>
                     </form>
             }
         </PanelFrame>
diff --git a/src/main/webui/src/commonButtons/buttonInterfaceProps.tsx b/src/main/webui/src/commonButtons/buttonInterfaceProps.tsx
index ce822c73..4cd59b3b 100644
--- a/src/main/webui/src/commonButtons/buttonInterfaceProps.tsx
+++ b/src/main/webui/src/commonButtons/buttonInterfaceProps.tsx
@@ -6,6 +6,7 @@ Input property for common buttons:
 import { SyntheticEvent } from 'react';
 import { TablerIconsProps } from '@tabler/icons-react';
 import {ButtonVariant, FloatingPosition} from "@mantine/core";
+import {UseFormReturnType} from "@mantine/form";
 
 /**
  * basic button interface props. Used by Submit button.
@@ -26,6 +27,23 @@ export interface BasicButtonInterfaceProps {
     variant?: ButtonVariant
 }
 
+/**
+ * form submit button interface props. Used by FormSubmit button.
+ *
+ * @param {string} toolTipLabel the label shown when hovered.
+ * @param {FloatingPosition} toolTipLabelPosition one of 'left', 'right', 'top', 'bottom', +
+ * '-start' and '-end' variants - defaults to 'top'
+ * @param {string} label the text shown next to the buttons icon - defaults to 'save'
+ * @param {ButtonVariant} varient one of 'default', 'light', 'subtle', 'filled',
+ * 'outline', 'white', 'transparent' - defaults to 'subtle'
+ */
+export interface FormSubmitButtonInterfaceProps {
+    form: UseFormReturnType<any>
+    toolTipLabelPosition?: FloatingPosition
+    label?: string
+    variant?: ButtonVariant
+}
+
 /**
  * used by any button with a specific click function.
  *
diff --git a/src/main/webui/src/commonButtons/save.tsx b/src/main/webui/src/commonButtons/save.tsx
index aa6e0f33..8b5e160f 100644
--- a/src/main/webui/src/commonButtons/save.tsx
+++ b/src/main/webui/src/commonButtons/save.tsx
@@ -2,15 +2,56 @@ import { Button, Tooltip } from '@mantine/core';
 import {IconDeviceFloppy} from "@tabler/icons-react";
 import {
     BasicButtonInterfaceProps,
-    ClickButtonInterfaceProps
+    ClickButtonInterfaceProps, FormSubmitButtonInterfaceProps
 } from './buttonInterfaceProps.tsx';
 import { ReactElement } from 'react';
 import { CLOSE_DELAY, ICON_SIZE, OPEN_DELAY } from '../constants.tsx';
 
+/**
+ * creates a submit button in the form of a Mantine ActionIcon displaying a
+ * floppy disk. This button has a type=submit and so does
+ * not require an 'onClick()' function.  It also takes form parameter that
+ * is used to automatically enable the button and provide a tool tip context
+ * for when it is disabled.
+ *
+ * @param {BasicButtonInterfaceProps} props the button inputs.
+ * @return {ReactElement} the dynamic html for the submit button
+ * @constructor
+ */
+export
+function FormSubmitButton(props: FormSubmitButtonInterfaceProps): ReactElement {
+    const label = props.label ?? 'Save';
+    return (
+        <Tooltip
+            position={props.toolTipLabelPosition}
+            label={
+                props.form.isValid()?
+                    props.form.isDirty()?
+                        label
+                        :"No values have changed"
+                    : "All fields must be complete and valid"
+            }
+            openDelay={OPEN_DELAY}
+            closeDelay={CLOSE_DELAY}
+        >
+            <Button
+                rightSection={<IconDeviceFloppy size={ICON_SIZE}/>}
+                color={"indigo.5"}
+                variant={props.variant ?? "subtle"}
+                type="submit"
+                disabled={!props.form.isValid() || !props.form.isDirty()}
+            >
+                {label}
+            </Button>
+        </Tooltip>
+    )
+}
+
+
 
 /**
  * creates a submit button in the form of a Mantine ActionIcon displaying a
- * floppy disk. This is the only button with a type=submit and so does
+ * floppy disk. This button has a type=submit and so does
  * not require an 'onClick()' function.
  *
  *
diff --git a/src/main/webui/src/commonPanel/appearance.tsx b/src/main/webui/src/commonPanel/appearance.tsx
index d3f1d911..788b7f0b 100644
--- a/src/main/webui/src/commonPanel/appearance.tsx
+++ b/src/main/webui/src/commonPanel/appearance.tsx
@@ -18,7 +18,7 @@ import {headerInterfaceProps, editorPanelHeaderInterfaceProps, managerPanelHeade
  */
 export function PanelHeader(props: headerInterfaceProps): ReactElement {
     return (
-        <Title order={3}>
+        <Title order={3} styles={{root: { marginBottom: 10, marginTop: 10}}}>
             { props.isLoading ?
                 <Badge size={"xl"} radius={0}>...</Badge> :
                 <Badge size={"xl"} radius={0}>{props.itemName}</Badge>