diff --git a/applications/tari_walletd/web_ui/src/contexts/ErrorNotificationContext.tsx b/applications/tari_walletd/web_ui/src/contexts/ErrorNotificationContext.tsx
index e7e8a699b5..79e5d39f0f 100644
--- a/applications/tari_walletd/web_ui/src/contexts/ErrorNotificationContext.tsx
+++ b/applications/tari_walletd/web_ui/src/contexts/ErrorNotificationContext.tsx
@@ -88,6 +88,7 @@ export const ErrorNotificationProvider: React.FC<{ children: React.ReactNode }>
           <Alert
             onClose={clearNotification}
             severity={notification.severity}
+            variant="filled"
             sx={{
               width: "100%",
               borderRadius: 6,
diff --git a/applications/tari_walletd/web_ui/src/routes/FlowEditor/FlowEditor.tsx b/applications/tari_walletd/web_ui/src/routes/FlowEditor/FlowEditor.tsx
index 326df51946..4231476b4c 100644
--- a/applications/tari_walletd/web_ui/src/routes/FlowEditor/FlowEditor.tsx
+++ b/applications/tari_walletd/web_ui/src/routes/FlowEditor/FlowEditor.tsx
@@ -47,6 +47,7 @@ import {
   DialogContent,
   DialogActions,
   SelectChangeEvent,
+  FormHelperText,
 } from "@mui/material";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
@@ -178,7 +179,7 @@ function FlowEditor() {
 
   const onAccountChange = (e: SelectChangeEvent) => {
     const selected = dataAccountsList?.accounts.find(
-      (acc: any) => substateIdToString(acc.account.address) === e.target.value,
+      (acc: any) => substateIdToString(acc.account.component_address) === e.target.value,
     );
     setAccount(selected);
   };
@@ -272,23 +273,32 @@ function FlowEditor() {
   return (
     <Grid container spacing={2}>
       <Grid item xs={panelOpen ? 9 : 12}>
-        <Grid item xs={12} md={12} lg={12}>
-          <PageHeading>Flow Editor</PageHeading>
-        </Grid>
-        <Grid item xs={12} md={12} lg={12}>
-          <StyledPaper>
-            <div style={{ height: "600px", width: "100%" }}>
-              <QueryBuilder
-                theme={themeMode}
-                getTransactionProps={getTransactionProps}
-                showGeneratedCode={showGeneratedCode}
-                executeTransaction={executeTransaction}
-                onNodesChange={onChange}
-                onEdgesChange={onChange}
-                onConnect={onChange}
-              />
-            </div>
-          </StyledPaper>
+        <Grid
+          container
+          spacing={3}
+          style={{
+            margin: 0,
+            width: "100%",
+          }}
+        >
+          <Grid item xs={12} md={12} lg={12}>
+            <PageHeading>Flow Editor</PageHeading>
+          </Grid>
+          <Grid item xs={12} md={12} lg={12}>
+            <StyledPaper>
+              <div style={{ height: "600px", width: "100%" }}>
+                <QueryBuilder
+                  theme={themeMode}
+                  getTransactionProps={getTransactionProps}
+                  showGeneratedCode={showGeneratedCode}
+                  executeTransaction={executeTransaction}
+                  onNodesChange={onChange}
+                  onEdgesChange={onChange}
+                  onConnect={onChange}
+                />
+              </div>
+            </StyledPaper>
+          </Grid>
         </Grid>
       </Grid>
       <Drawer
@@ -314,20 +324,25 @@ function FlowEditor() {
         </Box>
         <Box mb={2}>
           <FormControl fullWidth size="small">
-            <InputLabel id="account-select-label">Account used to pay fees</InputLabel>
+            <InputLabel id="account-select-label">Account</InputLabel>
             <Select
               labelId="account-select-label"
               name="account"
               label="Account"
+              placeholder="Select an account"
               value={account ? substateIdToString(account.account.component_address) : ""}
               onChange={onAccountChange}
             >
               {dataAccountsList?.accounts?.map((acc: any) => (
-                <MenuItem key={substateIdToString(acc.account.address)} value={substateIdToString(acc.account.address)}>
-                  {acc.account.name || substateIdToString(acc.account.address)}
+                <MenuItem
+                  key={substateIdToString(acc.account.component_address)}
+                  value={substateIdToString(acc.account.component_address)}
+                >
+                  {acc.account.name || substateIdToString(acc.account.component_address)}
                 </MenuItem>
               ))}
             </Select>
+            <FormHelperText>Select the account used to pay fees</FormHelperText>
           </FormControl>
           {account ? (
             <Typography variant="subtitle2" mt={1}>
@@ -341,12 +356,10 @@ function FlowEditor() {
         </Box>
         <Divider />
         <Box mt={2} mb={2}>
-          <Typography variant="subtitle2" gutterBottom>
-            Transaction Fee
-          </Typography>
           <TextField
             size="small"
             type="number"
+            label="Transaction Fee"
             value={fee}
             onChange={(e) => setFee(Number(e.target.value))}
             inputProps={{ min: 0 }}
@@ -369,38 +382,38 @@ function FlowEditor() {
           />
         </Box>
         <Box mt={2} mb={2}>
-          <Typography variant="subtitle2" gutterBottom>
-            Template ID
-          </Typography>
           <Box display="flex" gap={1}>
             <TextField
               size="small"
               value={templateId}
+              label="Template ID"
               onChange={(e) => setTemplateId(e.target.value)}
               placeholder="Enter template id"
               fullWidth
             />
           </Box>
           <Box mt={2} mb={2}>
-            <InputLabel id="template-select-label">Builtin Templates</InputLabel>
-            <Select
-              style={{ minWidth: "100%" }}
-              labelId="template-select-label"
-              name="templateId"
-              label="Template Id"
-              placeholder="Select a builtin template"
-              value={KNOWN_TEMPLATES.find((t) => t.address === templateId)?.address || ""}
-              onChange={(e) => setTemplateId(e.target.value)}
-            >
-              <MenuItem key={""} value={""}>
-                <em>None</em>
-              </MenuItem>
-              {KNOWN_TEMPLATES.map((template) => (
-                <MenuItem key={template.address} value={template.address}>
-                  {template.name} {shortenString(template.address)}
+            <FormControl fullWidth size="small">
+              <InputLabel id="template-select-label">Builtin Templates</InputLabel>
+              <Select
+                labelId="template-select-label"
+                name="templateId"
+                label="Builtin Templates"
+                placeholder="Select a builtin template"
+                value={KNOWN_TEMPLATES.find((t) => t.address === templateId)?.address || ""}
+                onChange={(e) => setTemplateId(e.target.value)}
+              >
+                <MenuItem key={""} value={""}>
+                  <em>None</em>
                 </MenuItem>
-              ))}
-            </Select>
+                {KNOWN_TEMPLATES.map((template) => (
+                  <MenuItem key={template.address} value={template.address}>
+                    {template.name} {shortenString(template.address)}
+                  </MenuItem>
+                ))}
+              </Select>
+              <FormHelperText>Select a builtin template</FormHelperText>
+            </FormControl>
           </Box>
           <Box>
             <Button variant="contained" onClick={() => refetch()} disabled={!templateId || isLoading}>
diff --git a/applications/tari_walletd/web_ui/src/routes/Manifest/Manifest.tsx b/applications/tari_walletd/web_ui/src/routes/Manifest/Manifest.tsx
index c923f44335..643b44283f 100644
--- a/applications/tari_walletd/web_ui/src/routes/Manifest/Manifest.tsx
+++ b/applications/tari_walletd/web_ui/src/routes/Manifest/Manifest.tsx
@@ -193,28 +193,34 @@ function VariableEditor({
         </Button>
       </Stack>
 
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Key</TableCell>
-            <TableCell>Value</TableCell>
-            <TableCell>Actions</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {Object.entries(variables).map(([k, v]) => (
-            <TableRow key={k}>
-              <DataTableCell>{k}</DataTableCell>
-              <DataTableCell>{v}</DataTableCell>
-              <DataTableCell>
-                <Button variant="outlined" color="secondary" onClick={() => onRemove(k)}>
-                  Remove
-                </Button>
-              </DataTableCell>
+      {Object.keys(variables).length > 0 && (
+        <Table
+          sx={{
+            marginBottom: 2,
+          }}
+        >
+          <TableHead>
+            <TableRow>
+              <TableCell>Key</TableCell>
+              <TableCell>Value</TableCell>
+              <TableCell>Actions</TableCell>
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+          </TableHead>
+          <TableBody>
+            {Object.entries(variables).map(([k, v]) => (
+              <TableRow key={k}>
+                <DataTableCell>{k}</DataTableCell>
+                <DataTableCell>{v}</DataTableCell>
+                <DataTableCell>
+                  <Button variant="outlined" color="error" onClick={() => onRemove(k)}>
+                    Remove
+                  </Button>
+                </DataTableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
     </Grid>
   );
 }
diff --git a/applications/tari_walletd/web_ui/src/routes/Templates/Templates.tsx b/applications/tari_walletd/web_ui/src/routes/Templates/Templates.tsx
index 5d40ab9c3e..34a2285d3d 100644
--- a/applications/tari_walletd/web_ui/src/routes/Templates/Templates.tsx
+++ b/applications/tari_walletd/web_ui/src/routes/Templates/Templates.tsx
@@ -4,8 +4,23 @@
 import { useListTemplatesAuthored } from "@api/hooks/useTemplatesAuthored";
 import { useEffect, useState } from "react";
 import { useAccountsList } from "@api/hooks/useAccounts";
-import InputLabel from "@mui/material/InputLabel";
-import Select, { SelectChangeEvent } from "@mui/material/Select/Select";
+import PageHeading from "@components/PageHeading";
+import {
+  InputLabel,
+  Select,
+  SelectChangeEvent,
+  MenuItem,
+  FormControl,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  TableContainer,
+  Collapse,
+  TablePagination,
+  Stack,
+} from "@mui/material";
 import {
   AccountInfo,
   ArgDef,
@@ -15,24 +30,16 @@ import {
   substateIdToString,
   Type as FuncType,
 } from "@tari-project/typescript-bindings";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import TableCell from "@mui/material/TableCell";
-import TableBody from "@mui/material/TableBody";
-import TableContainer from "@mui/material/TableContainer";
 import CopyAddress from "@components/CopyAddress";
-import { AccordionIconButton, DataTableCell } from "@components/StyledComponents";
+import { AccordionIconButton, DataTableCell, StyledPaper } from "@components/StyledComponents";
 import Grid from "@mui/material/Grid";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import { Collapse, TablePagination } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { SlCheck, SlClose } from "react-icons/sl";
 import { handleChangePage, handleChangeRowsPerPage } from "@utils/helpers";
 import useAccountStore from "@store/accountStore";
+import FetchStatusCheck from "@components/FetchStatusCheck";
 
 function getTypeAsString(funcType: FuncType): string {
   if (typeof funcType === "string") {
@@ -67,7 +74,12 @@ function Templates() {
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const theme = useTheme();
   const address = decodeOotleAddress(account?.address || accountStore.address);
-  const { data: templatesResponse } = useListTemplatesAuthored({
+  const {
+    data: templatesResponse,
+    isLoading,
+    isError,
+    error,
+  } = useListTemplatesAuthored({
     author_public_key: address.accountPublicKey,
     page: page,
     page_size: rowsPerPage,
@@ -96,166 +108,172 @@ function Templates() {
     }
   }, [templatesResponse]);
 
-  if (isAccountsLoading) {
-    return <div>Loading...</div>;
-  }
-
   return (
-    <Grid item xs={12} md={12} lg={12}>
-      {<h2>Templates</h2>}
-
-      {account ? (
-        <FormControl>
-          <InputLabel id="account">Account</InputLabel>
-          <Select
-            labelId="account"
-            name="account"
-            label="Account"
-            style={{ flexGrow: 1, minWidth: "200px" }}
-            value={substateIdToString(account.account.component_address)}
-            onChange={onAccountChange}
+    <>
+      <Grid item xs={12} md={12} lg={12}>
+        <PageHeading>Templates</PageHeading>
+      </Grid>
+      <Grid item xs={12} md={12} lg={12}>
+        <StyledPaper>
+          <FetchStatusCheck
+            isLoading={isLoading || isAccountsLoading}
+            isError={isError}
+            errorMessage={error ? (error as Error).message : "Error fetching templates."}
           >
-            {dataAccountsList?.accounts.map((account: AccountInfo, i: number) => {
-              return (
-                <MenuItem key={i} value={substateIdToString(account.account.component_address)}>
-                  {account.account.name || substateIdToString(account.account.component_address)}
-                </MenuItem>
-              );
-            })}
-          </Select>
-        </FormControl>
-      ) : null}
-
-      {account ? (
-        <Grid item xs={12} md={12} lg={12}>
-          <TableContainer>
-            <Table>
-              <TableHead>
-                <TableRow>
-                  <TableCell>Address</TableCell>
-                  <TableCell>Name</TableCell>
-                  <TableCell>Tari Version</TableCell>
-                  <TableCell></TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {templatesResponse?.templates.map((template: AuthoredTemplate, index: number) => {
-                  return (
-                    <>
-                      <TableRow key={`template-${index}-1`}>
-                        <DataTableCell>
-                          <CopyAddress address={`template_${template.address}`} />
-                        </DataTableCell>
-                        <DataTableCell>{template.name}</DataTableCell>
-                        <TableCell>{template.tari_version}</TableCell>
-                        <TableCell>
-                          <AccordionIconButton
-                            aria-label="expand row"
-                            size="small"
-                            onClick={() => {
-                              if (open) {
-                                const newOpen = open.map((value, idx) => (idx === index ? !value : value));
-                                setOpen(newOpen);
-                              }
-                            }}
-                          >
-                            {open[index] ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-                          </AccordionIconButton>
-                        </TableCell>
+            <Stack spacing={1}>
+              <Stack alignItems="center" justifyContent="flex-end" direction="row" spacing={2}>
+                {account ? (
+                  <FormControl style={{ minWidth: "250px" }}>
+                    <InputLabel id="account">Account</InputLabel>
+                    <Select
+                      labelId="account"
+                      name="account"
+                      label="Account"
+                      value={substateIdToString(account.account.component_address)}
+                      onChange={onAccountChange}
+                      size="medium"
+                    >
+                      {dataAccountsList?.accounts.map((account: AccountInfo, i: number) => {
+                        return (
+                          <MenuItem key={i} value={substateIdToString(account.account.component_address)}>
+                            {account.account.name || substateIdToString(account.account.component_address)}
+                          </MenuItem>
+                        );
+                      })}
+                    </Select>
+                  </FormControl>
+                ) : null}
+              </Stack>
+              {account ? (
+                <TableContainer>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        <TableCell>Address</TableCell>
+                        <TableCell>Name</TableCell>
+                        <TableCell>Tari Version</TableCell>
+                        <TableCell></TableCell>
                       </TableRow>
-                      {open[index] ? (
-                        <TableRow key={`template-${index}-open`}>
-                          <DataTableCell
-                            style={{
-                              paddingBottom: theme.spacing(1),
-                              paddingTop: 0,
-                              borderBottom: "none",
-                            }}
-                            colSpan={2}
-                          >
-                            <Collapse in={open[index]} timeout="auto" unmountOnExit>
-                              <h3>Functions</h3>
-                              {template.functions ? (
-                                <TableContainer>
-                                  <Table>
-                                    <TableHead>
-                                      <TableRow>
-                                        <TableCell>Name</TableCell>
-                                        <TableCell>Mutable</TableCell>
-                                        <TableCell>Arguments</TableCell>
-                                        <TableCell>Output</TableCell>
-                                      </TableRow>
-                                    </TableHead>
-                                    <TableBody>
-                                      {template.functions.map((funcDef: FunctionDef, index: number) => {
-                                        return (
-                                          <TableRow key={index}>
-                                            <TableCell>{funcDef.name}</TableCell>
-                                            <TableCell>
-                                              {funcDef.is_mut ? (
-                                                <SlCheck size={25} color={"green"} />
-                                              ) : (
-                                                <SlClose size={25} color={"red"} />
-                                              )}
-                                            </TableCell>
-                                            <TableCell>
-                                              {funcDef.arguments.length > 0 ? (
-                                                <TableContainer>
-                                                  <Table>
-                                                    <TableHead>
-                                                      <TableRow>
-                                                        <TableCell>Name</TableCell>
-                                                        <TableCell>Type</TableCell>
-                                                      </TableRow>
-                                                    </TableHead>
-                                                    <TableBody>
-                                                      {funcDef.arguments.map((arg: ArgDef, index: number) => {
-                                                        return (
-                                                          <TableRow key={index}>
-                                                            <TableCell>{arg.name}</TableCell>
-                                                            <TableCell>{getTypeAsString(arg.arg_type)}</TableCell>
-                                                          </TableRow>
-                                                        );
-                                                      })}
-                                                    </TableBody>
-                                                  </Table>
-                                                </TableContainer>
-                                              ) : (
-                                                <SlClose size={25} color={"red"} />
-                                              )}
-                                            </TableCell>
-                                            <TableCell>{getTypeAsString(funcDef.output)}</TableCell>
-                                          </TableRow>
-                                        );
-                                      })}
-                                    </TableBody>
-                                  </Table>
-                                </TableContainer>
-                              ) : null}
-                            </Collapse>
-                          </DataTableCell>
-                        </TableRow>
-                      ) : null}
-                    </>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </TableContainer>
-          <Grid item xs={12} md={12} lg={12}>
-            <TablePagination
-              rowsPerPageOptions={[10, 25, 50]}
-              component="div"
-              count={templatesCount}
-              rowsPerPage={rowsPerPage}
-              page={page}
-              onPageChange={(event, newPage) => handleChangePage(event, newPage, setPage)}
-              onRowsPerPageChange={(event) => handleChangeRowsPerPage(event, setRowsPerPage, setPage)}
-            />
-          </Grid>
-        </Grid>
-      ) : null}
-    </Grid>
+                    </TableHead>
+                    <TableBody>
+                      {templatesResponse?.templates.map((template: AuthoredTemplate, index: number) => {
+                        return (
+                          <>
+                            <TableRow key={`template-${index}-1`}>
+                              <DataTableCell>
+                                <CopyAddress address={`template_${template.address}`} />
+                              </DataTableCell>
+                              <DataTableCell>{template.name}</DataTableCell>
+                              <TableCell>{template.tari_version}</TableCell>
+                              <TableCell>
+                                <AccordionIconButton
+                                  aria-label="expand row"
+                                  size="small"
+                                  onClick={() => {
+                                    if (open) {
+                                      const newOpen = open.map((value, idx) => (idx === index ? !value : value));
+                                      setOpen(newOpen);
+                                    }
+                                  }}
+                                >
+                                  {open[index] ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+                                </AccordionIconButton>
+                              </TableCell>
+                            </TableRow>
+                            {open[index] ? (
+                              <TableRow key={`template-${index}-open`}>
+                                <DataTableCell
+                                  style={{
+                                    paddingBottom: theme.spacing(1),
+                                    paddingTop: 0,
+                                    borderBottom: "none",
+                                  }}
+                                  colSpan={2}
+                                >
+                                  <Collapse in={open[index]} timeout="auto" unmountOnExit>
+                                    <h3>Functions</h3>
+                                    {template.functions ? (
+                                      <TableContainer>
+                                        <Table>
+                                          <TableHead>
+                                            <TableRow>
+                                              <TableCell>Name</TableCell>
+                                              <TableCell>Mutable</TableCell>
+                                              <TableCell>Arguments</TableCell>
+                                              <TableCell>Output</TableCell>
+                                            </TableRow>
+                                          </TableHead>
+                                          <TableBody>
+                                            {template.functions.map((funcDef: FunctionDef, index: number) => {
+                                              return (
+                                                <TableRow key={index}>
+                                                  <TableCell>{funcDef.name}</TableCell>
+                                                  <TableCell>
+                                                    {funcDef.is_mut ? (
+                                                      <SlCheck size={25} color={"green"} />
+                                                    ) : (
+                                                      <SlClose size={25} color={"red"} />
+                                                    )}
+                                                  </TableCell>
+                                                  <TableCell>
+                                                    {funcDef.arguments.length > 0 ? (
+                                                      <TableContainer>
+                                                        <Table>
+                                                          <TableHead>
+                                                            <TableRow>
+                                                              <TableCell>Name</TableCell>
+                                                              <TableCell>Type</TableCell>
+                                                            </TableRow>
+                                                          </TableHead>
+                                                          <TableBody>
+                                                            {funcDef.arguments.map((arg: ArgDef, index: number) => {
+                                                              return (
+                                                                <TableRow key={index}>
+                                                                  <TableCell>{arg.name}</TableCell>
+                                                                  <TableCell>{getTypeAsString(arg.arg_type)}</TableCell>
+                                                                </TableRow>
+                                                              );
+                                                            })}
+                                                          </TableBody>
+                                                        </Table>
+                                                      </TableContainer>
+                                                    ) : (
+                                                      <SlClose size={25} color={"red"} />
+                                                    )}
+                                                  </TableCell>
+                                                  <TableCell>{getTypeAsString(funcDef.output)}</TableCell>
+                                                </TableRow>
+                                              );
+                                            })}
+                                          </TableBody>
+                                        </Table>
+                                      </TableContainer>
+                                    ) : null}
+                                  </Collapse>
+                                </DataTableCell>
+                              </TableRow>
+                            ) : null}
+                          </>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              ) : null}
+              <TablePagination
+                rowsPerPageOptions={[10, 25, 50]}
+                component="div"
+                count={templatesCount}
+                rowsPerPage={rowsPerPage}
+                page={page}
+                onPageChange={(event, newPage) => handleChangePage(event, newPage, setPage)}
+                onRowsPerPageChange={(event) => handleChangeRowsPerPage(event, setRowsPerPage, setPage)}
+              />
+            </Stack>
+          </FetchStatusCheck>
+        </StyledPaper>
+      </Grid>
+    </>
   );
 }