diff --git a/web/src/components/style/DisabledTextField.tsx b/web/src/components/style/DisabledTextField.tsx
index 33efcf83..4acc962b 100644
--- a/web/src/components/style/DisabledTextField.tsx
+++ b/web/src/components/style/DisabledTextField.tsx
@@ -1,4 +1,4 @@
-import { TextField, Theme } from "@mui/material";
+import { Checkbox, FormControlLabel, TextField, Theme } from "@mui/material";
 import { styled } from "@mui/styles";
 
 export const DisabledTextField = styled(TextField)(({ theme }: { theme: Theme }) => ({
@@ -7,3 +7,16 @@ export const DisabledTextField = styled(TextField)(({ theme }: { theme: Theme })
         WebkitTextFillColor: theme.palette.text.primary,
     },
 }));
+
+export const DisabledFormControlLabel = styled(FormControlLabel)(({ theme }: { theme: Theme }) => ({
+    "& .Mui-disabled": {
+        color: theme.palette.text.primary,
+        WebkitTextFillColor: theme.palette.text.primary,
+    },
+}));
+export const DisabledCheckbox = styled(Checkbox)(({ theme }: { theme: Theme }) => ({
+    "& .Mui-disabled": {
+        color: theme.palette.text.primary,
+        WebkitTextFillColor: theme.palette.text.primary,
+    },
+}));
diff --git a/web/src/components/style/Layout.tsx b/web/src/components/style/Layout.tsx
index 52648650..5ba729e2 100644
--- a/web/src/components/style/Layout.tsx
+++ b/web/src/components/style/Layout.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink, useLocation } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import { isAuthenticated } from "../../state/auth";
 import ListItemLink from "./ListItemLink";
@@ -50,6 +50,7 @@ export default function Layout({ group = null, children, ...props }) {
     const theme: Theme = useTheme();
     const dotsMenuOpen = Boolean(anchorEl);
     const cfg = useRecoilValue(config);
+    const location = useLocation();
 
     const [mobileOpen, setMobileOpen] = useState(true);
 
@@ -73,43 +74,66 @@ export default function Layout({ group = null, children, ...props }) {
             <Divider />
             {group != null && (
                 <List sx={{ pb: 0 }}>
-                    <ListItemLink to={`/groups/${group.id}/`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/`}
+                        selected={
+                            location.pathname === `/groups/${group.id}/` || location.pathname === `/groups/${group.id}`
+                        }
+                    >
                         <ListItemIcon>
                             <Paid />
                         </ListItemIcon>
                         <ListItemText primary="Transactions" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/balances`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/balances`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/balances`)}
+                    >
                         <ListItemIcon>
                             <BarChart />
                         </ListItemIcon>
                         <ListItemText primary="Balances" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/accounts`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/accounts`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/accounts`)}
+                    >
                         <ListItemIcon>
                             <AccountBalance />
                         </ListItemIcon>
                         <ListItemText primary="Accounts" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/detail`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/detail`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/detail`)}
+                    >
                         <ListItemIcon>
                             <AdminPanelSettings />
                         </ListItemIcon>
                         <ListItemText primary="Group Settings" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/members`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/members`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/members`)}
+                    >
                         <ListItemIcon>
                             <People />
                         </ListItemIcon>
                         <ListItemText primary="Group Members" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/invites`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/invites`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/invites`)}
+                    >
                         <ListItemIcon>
                             <Mail />
                         </ListItemIcon>
                         <ListItemText primary="Group Invites" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/log`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/log`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/log`)}
+                    >
                         <ListItemIcon>
                             <Message />
                         </ListItemIcon>
diff --git a/web/src/components/style/SidebarGroupList.tsx b/web/src/components/style/SidebarGroupList.tsx
index c9159dd7..299b31af 100644
--- a/web/src/components/style/SidebarGroupList.tsx
+++ b/web/src/components/style/SidebarGroupList.tsx
@@ -12,6 +12,16 @@ export default function SidebarGroupList({ group = null }) {
     const isGuest = useRecoilValue(isGuestUser);
     const [showGroupCreationModal, setShowGroupCreationModal] = useState(false);
 
+    const openGroupCreateModal = () => {
+        setShowGroupCreationModal(true);
+    };
+
+    const closeGroupCreateModal = (evt, reason) => {
+        if (reason !== "backdropClick") {
+            setShowGroupCreationModal(false);
+        }
+    };
+
     return (
         <>
             <List sx={{ pt: 0 }}>
@@ -26,16 +36,14 @@ export default function SidebarGroupList({ group = null }) {
                 {!isGuest && (
                     <ListItem sx={{ padding: 0 }}>
                         <Grid container justifyContent="center">
-                            <IconButton size="small" onClick={() => setShowGroupCreationModal(true)}>
+                            <IconButton size="small" onClick={openGroupCreateModal}>
                                 <Add />
                             </IconButton>
                         </Grid>
                     </ListItem>
                 )}
             </List>
-            {!isGuest && (
-                <GroupCreateModal show={showGroupCreationModal} onClose={() => setShowGroupCreationModal(false)} />
-            )}
+            {!isGuest && <GroupCreateModal show={showGroupCreationModal} onClose={closeGroupCreateModal} />}
         </>
     );
 }
diff --git a/web/src/components/transactions/TransactionList.tsx b/web/src/components/transactions/TransactionList.tsx
index 80aabe86..ad4cddf5 100644
--- a/web/src/components/transactions/TransactionList.tsx
+++ b/web/src/components/transactions/TransactionList.tsx
@@ -123,12 +123,20 @@ export default function TransactionList({ group }) {
                 <TransferCreateModal
                     group={group}
                     show={showTransferCreateDialog}
-                    onClose={() => setShowTransferCreateDialog(false)}
+                    onClose={(evt, reason) => {
+                        if (reason !== "backdropClick") {
+                            setShowTransferCreateDialog(false);
+                        }
+                    }}
                 />
                 <PurchaseCreateModal
                     group={group}
                     show={showPurchaseCreateDialog}
-                    onClose={() => setShowPurchaseCreateDialog(false)}
+                    onClose={(evt, reason) => {
+                        if (reason !== "backdropClick") {
+                            setShowPurchaseCreateDialog(false);
+                        }
+                    }}
                 />
             </MobilePaper>
             {userPermissions.can_write && (
@@ -143,12 +151,14 @@ export default function TransactionList({ group }) {
                 >
                     <SpeedDialAction
                         icon={<ShoppingCart />}
-                        tooltipTitle="Create Purchase"
+                        tooltipTitle="Purchase"
+                        tooltipOpen
                         onClick={() => setShowPurchaseCreateDialog(true)}
                     />
                     <SpeedDialAction
                         icon={<CompareArrows />}
-                        tooltipTitle="Create Transfer"
+                        tooltipTitle="Transfer"
+                        tooltipOpen
                         onClick={() => setShowTransferCreateDialog(true)}
                     />
                 </SpeedDial>
diff --git a/web/src/components/transactions/purchase/PurchaseItems.tsx b/web/src/components/transactions/purchase/PurchaseItems.tsx
index dbcc8831..1d156843 100644
--- a/web/src/components/transactions/purchase/PurchaseItems.tsx
+++ b/web/src/components/transactions/purchase/PurchaseItems.tsx
@@ -564,7 +564,7 @@ export default function PurchaseItems({ group, transaction }: PropTypes) {
                                       !position.is_empty && (
                                           <TableRow hover key={position.id}>
                                               <TableCell>{position.name}</TableCell>
-                                              <TableCell align="right" style={{ width: 80 }}>
+                                              <TableCell align="right" style={{ minWidth: 80 }}>
                                                   {position.price.toFixed(2)} {transaction.currency_symbol}
                                               </TableCell>
                                               {positionAccounts.map((accountID) => (
diff --git a/web/src/pages/accounts/AccountList.tsx b/web/src/pages/accounts/AccountList.tsx
index db512d6b..6a5feebb 100644
--- a/web/src/pages/accounts/AccountList.tsx
+++ b/web/src/pages/accounts/AccountList.tsx
@@ -110,9 +110,11 @@ export default function AccountList({ group }) {
         setShowPersonalAccountEditModal(true);
     };
 
-    const closeAccountEdit = () => {
-        setShowPersonalAccountEditModal(false);
-        setAccountToEdit(null);
+    const closeAccountEdit = (evt, reason) => {
+        if (reason !== "backdropClick") {
+            setShowPersonalAccountEditModal(false);
+            setAccountToEdit(null);
+        }
     };
 
     const openClearingAccountEdit = (account) => {
@@ -120,9 +122,11 @@ export default function AccountList({ group }) {
         setShowClearingAccountEditModal(true);
     };
 
-    const closeClearingAccountEdit = () => {
-        setShowClearingAccountEditModal(false);
-        setClearingAccountToEdit(null);
+    const closeClearingAccountEdit = (evt, reason) => {
+        if (reason !== "backdropClick") {
+            setShowClearingAccountEditModal(false);
+            setClearingAccountToEdit(null);
+        }
     };
 
     const confirmDeleteAccount = () => {
@@ -260,7 +264,11 @@ export default function AccountList({ group }) {
                                 </Grid>
                                 <CreateAccountModal
                                     show={showPersonalAccountCreationModal}
-                                    onClose={() => setShowPersonalAccountCreationModal(false)}
+                                    onClose={(evt, reason) => {
+                                        if (reason !== "backdropClick") {
+                                            setShowPersonalAccountCreationModal(false);
+                                        }
+                                    }}
                                     group={group}
                                 />
                                 <EditAccountModal
@@ -343,7 +351,11 @@ export default function AccountList({ group }) {
                                 </Grid>
                                 <CreateClearingAccountModal
                                     show={showClearingAccountCreationModal}
-                                    onClose={() => setShowClearingAccountCreationModal(false)}
+                                    onClose={(evt, reason) => {
+                                        if (reason !== "backdropClick") {
+                                            setShowClearingAccountCreationModal(false);
+                                        }
+                                    }}
                                     initialValues={clearingAccountToCopy}
                                     group={group}
                                 />
@@ -371,12 +383,14 @@ export default function AccountList({ group }) {
                     >
                         <SpeedDialAction
                             icon={<PersonalAccountIcon />}
-                            tooltipTitle="Create Personal Account"
+                            tooltipTitle="Personal"
+                            tooltipOpen
                             onClick={() => setShowPersonalAccountCreationModal(true)}
                         />
                         <SpeedDialAction
                             icon={<ClearingAccountIcon />}
-                            tooltipTitle="Create Clearing Account"
+                            tooltipTitle="Clearing"
+                            tooltipOpen
                             onClick={openCreateDialog}
                         />
                     </SpeedDial>
diff --git a/web/src/pages/groups/GroupList.tsx b/web/src/pages/groups/GroupList.tsx
index 14117cdc..e06c7a40 100644
--- a/web/src/pages/groups/GroupList.tsx
+++ b/web/src/pages/groups/GroupList.tsx
@@ -35,6 +35,16 @@ export default function GroupList() {
         setGroupToDelete(null);
     };
 
+    const openGroupCreateModal = () => {
+        setShowGroupCreationModal(true);
+    };
+
+    const closeGroupCreateModal = (evt, reason) => {
+        if (reason !== "backdropClick") {
+            setShowGroupCreationModal(false);
+        }
+    };
+
     return (
         <MobilePaper>
             <Typography component="h3" variant="h5">
@@ -74,11 +84,11 @@ export default function GroupList() {
             {!isGuest && (
                 <>
                     <Grid container justifyContent="center">
-                        <IconButton color="primary" onClick={() => setShowGroupCreationModal(true)}>
+                        <IconButton color="primary" onClick={openGroupCreateModal}>
                             <Add />
                         </IconButton>
                     </Grid>
-                    <GroupCreateModal show={showGroupCreationModal} onClose={() => setShowGroupCreationModal(false)} />
+                    <GroupCreateModal show={showGroupCreationModal} onClose={closeGroupCreateModal} />
                 </>
             )}
             <GroupDeleteModal
diff --git a/web/src/pages/groups/GroupSettings.tsx b/web/src/pages/groups/GroupSettings.tsx
index d048fe65..cd188e92 100644
--- a/web/src/pages/groups/GroupSettings.tsx
+++ b/web/src/pages/groups/GroupSettings.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import EditableField from "../../components/style/EditableField";
 
 import { toast } from "react-toastify";
 import { leaveGroup, updateGroupMetadata } from "../../api";
@@ -15,11 +14,24 @@ import {
     DialogContent,
     DialogContentText,
     DialogTitle,
-    FormControlLabel,
+    FormGroup,
     Grid,
+    LinearProgress,
 } from "@mui/material";
 import { MobilePaper } from "../../components/style/mobile";
 import { useTitle } from "../../utils";
+import { Form, Formik } from "formik";
+import * as yup from "yup";
+import { DisabledFormControlLabel, DisabledTextField } from "../../components/style/DisabledTextField";
+import { Cancel, Edit, Save } from "@mui/icons-material";
+
+const validationSchema = yup.object({
+    name: yup.string().required("group name is required"),
+    description: yup.string(),
+    terms: yup.string(),
+    currencySymbol: yup.string(),
+    addUserAccountOnJoin: yup.boolean(),
+});
 
 export default function GroupSettings({ group }) {
     const [showLeaveModal, setShowLeaveModal] = useState(false);
@@ -27,26 +39,35 @@ export default function GroupSettings({ group }) {
 
     const userPermissions = useRecoilValue(currUserPermissions(group.id));
 
+    const [isEditing, setIsEditing] = useState(false);
+
     useTitle(`${group.name} - Settings`);
 
-    // TODO: actually make the editing part work
-    const updateGroup = ({
-        name = null,
-        description = null,
-        currencySymbol = null,
-        terms = null,
-        addUserAccountOnJoin = null,
-    }) => {
+    const startEdit = () => {
+        setIsEditing(true);
+    };
+
+    const stopEdit = () => {
+        setIsEditing(false);
+    };
+
+    const handleSubmit = (values, { setSubmitting }) => {
         updateGroupMetadata({
             groupID: group.id,
-            name: name ? name : group.name,
-            description: description ? description : group.description,
-            currencySymbol: currencySymbol ? currencySymbol : group.currency_symbol,
-            terms: terms ? terms : group.terms,
-            addUserAccountOnJoin: addUserAccountOnJoin != null ? addUserAccountOnJoin : group.add_user_account_on_join,
-        }).catch((err) => {
-            toast.error(err);
-        });
+            name: values.name,
+            description: values.description,
+            currencySymbol: values.currencySymbol,
+            terms: values.terms,
+            addUserAccountOnJoin: values.addUserAccountOnJoin,
+        })
+            .then((res) => {
+                setSubmitting(false);
+                setIsEditing(false);
+            })
+            .catch((err) => {
+                setSubmitting(false);
+                toast.error(err);
+            });
     };
 
     const confirmLeaveGroup = () => {
@@ -67,51 +88,132 @@ export default function GroupSettings({ group }) {
                 <Alert severity="info">You only have read access to this group</Alert>
             ) : null}
 
-            <EditableField
-                label="Name"
-                margin="normal"
-                variant="standard"
-                value={group.name}
-                canEdit={userPermissions.can_write}
-                onChange={(name) => updateGroup({ name: name })}
-            />
-
-            <EditableField
-                label="Description"
-                margin="normal"
-                variant="standard"
-                value={group.description}
-                canEdit={userPermissions.can_write}
-                onChange={(description) => updateGroup({ description: description })}
-            />
-
-            <EditableField
-                label="Currency Symbol"
-                margin="normal"
-                variant="standard"
-                value={group.currency_symbol}
-                canEdit={userPermissions.can_write}
-                onChange={(currencySymbol) => updateGroup({ currencySymbol: currencySymbol })}
-            />
-
-            <EditableField
-                label="Terms"
-                margin="normal"
-                variant="standard"
-                value={group.terms}
-                canEdit={userPermissions.can_write}
-                onChange={(terms) => updateGroup({ terms: terms })}
-            />
-
-            <FormControlLabel
-                control={
-                    <Checkbox
-                        onChange={(e) => updateGroup({ addUserAccountOnJoin: e.target.checked })}
-                        checked={group.add_user_account_on_join}
-                    />
-                }
-                label="Automatically add accounts for newly joined group members"
-            />
+            <Formik
+                initialValues={{
+                    name: group.name,
+                    description: group.description,
+                    terms: group.terms,
+                    currencySymbol: group.currency_symbol,
+                    addUserAccountOnJoin: group.add_user_account_on_join,
+                }}
+                onSubmit={handleSubmit}
+                validationSchema={validationSchema}
+                enableReinitialize={true}
+            >
+                {({ values, handleBlur, handleChange, handleSubmit, isSubmitting }) => (
+                    <Form onSubmit={handleSubmit}>
+                        <DisabledTextField
+                            variant="standard"
+                            margin="normal"
+                            required
+                            fullWidth
+                            type="text"
+                            label="Name"
+                            name="name"
+                            disabled={!userPermissions.can_write || !isEditing}
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            value={values.name}
+                        />
+
+                        <DisabledTextField
+                            variant="standard"
+                            margin="normal"
+                            fullWidth
+                            type="text"
+                            name="description"
+                            label="Description"
+                            disabled={!userPermissions.can_write || !isEditing}
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            value={values.description}
+                        />
+                        <DisabledTextField
+                            variant="standard"
+                            margin="normal"
+                            required
+                            fullWidth
+                            type="text"
+                            name="currencySymbol"
+                            label="Currency"
+                            disabled={!userPermissions.can_write || !isEditing}
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            value={values.currencySymbol}
+                        />
+                        <DisabledTextField
+                            variant="standard"
+                            multiline={true}
+                            margin="normal"
+                            fullWidth
+                            type="text"
+                            name="terms"
+                            label="Terms"
+                            disabled={!userPermissions.can_write || !isEditing}
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            value={values.terms}
+                        />
+                        <FormGroup>
+                            <DisabledFormControlLabel
+                                control={
+                                    <Checkbox
+                                        name="addUserAccountOnJoin"
+                                        disabled={!userPermissions.can_write || !isEditing}
+                                        onBlur={handleBlur}
+                                        onChange={handleChange}
+                                        checked={values.addUserAccountOnJoin}
+                                    />
+                                }
+                                label="Automatically add accounts for newly joined group members"
+                            />
+                        </FormGroup>
+
+                        {isSubmitting && <LinearProgress />}
+                        <Grid container justifyContent="space-between" style={{ marginTop: 10 }}>
+                            <div>
+                                {userPermissions.can_write && isEditing && (
+                                    <>
+                                        <Button
+                                            type="submit"
+                                            variant="contained"
+                                            color="primary"
+                                            disabled={isSubmitting}
+                                            startIcon={<Save />}
+                                        >
+                                            Save
+                                        </Button>
+                                        <Button
+                                            variant="contained"
+                                            color="error"
+                                            disabled={isSubmitting}
+                                            onClick={stopEdit}
+                                            startIcon={<Cancel />}
+                                            sx={{ ml: 1 }}
+                                        >
+                                            Cancel
+                                        </Button>
+                                    </>
+                                )}
+                                {userPermissions.can_write && !isEditing && (
+                                    <Button
+                                        variant="contained"
+                                        color="primary"
+                                        disabled={isSubmitting}
+                                        onClick={startEdit}
+                                        startIcon={<Edit />}
+                                    >
+                                        Edit
+                                    </Button>
+                                )}
+                            </div>
+                            <Button variant="contained" onClick={() => setShowLeaveModal(true)}>
+                                Leave Group
+                            </Button>
+                        </Grid>
+                    </Form>
+                )}
+            </Formik>
 
             {/*<List>*/}
             {/*    <ListItem>*/}
@@ -122,12 +224,6 @@ export default function GroupSettings({ group }) {
             {/*    </ListItem>*/}
             {/*</List>*/}
 
-            <Grid container justifyContent="center" style={{ marginTop: 20 }}>
-                <Button variant="contained" onClick={() => setShowLeaveModal(true)}>
-                    Leave Group
-                </Button>
-            </Grid>
-
             <Dialog open={showLeaveModal} onClose={() => setShowLeaveModal(false)}>
                 <DialogTitle>Leave Group</DialogTitle>
                 <DialogContent>