diff --git a/packages/core/components/Buttons/TertiaryButton.tsx b/packages/core/components/Buttons/TertiaryButton.tsx
index 8cda15839..8bc437c27 100644
--- a/packages/core/components/Buttons/TertiaryButton.tsx
+++ b/packages/core/components/Buttons/TertiaryButton.tsx
@@ -16,6 +16,7 @@ interface Props {
     menuItems?: IContextualMenuItem[];
     onClick?: () => void;
     invertColor?: boolean;
+    text?: string;
     title: string;
 }
 
@@ -37,6 +38,7 @@ export default function TertiaryButton(props: Props) {
             menuDirection={props.menuDirection}
             menuItems={props.menuItems}
             onClick={props.onClick}
+            text={props.text}
             title={props.title}
         />
     );
diff --git a/packages/core/components/FileDetails/index.tsx b/packages/core/components/FileDetails/index.tsx
index 3e7086f3a..85ae5a120 100644
--- a/packages/core/components/FileDetails/index.tsx
+++ b/packages/core/components/FileDetails/index.tsx
@@ -105,51 +105,41 @@ export default function FileDetails(props: Props) {
                 <div className={styles.overflowContainer}>
                     {props.fileDetails && (
                         <>
-                            {!props.onClose ? (
-                                <div className={styles.header}>
-                                    <div className={styles.leftAlign}>
-                                        <Pagination className={styles.pagination} />
-                                    </div>
-                                    {/* spacing component */}
-                                    <div className={styles.gutter}></div>
-                                    <div className={styles.rightAlign}>
-                                        <Tooltip content={disabledDownloadReason}>
-                                            <TertiaryButton
-                                                className={styles.tertiaryButton}
-                                                disabled={isDownloadDisabled}
-                                                iconName="Download"
-                                                id="download-file-button"
-                                                title={`Download file ${truncatedFileName} to local system`}
-                                                onClick={onDownload}
-                                            />
-                                        </Tooltip>
-                                        <PrimaryButton
-                                            id={Tutorial.OPEN_WITH_ID}
-                                            className={styles.openWithButton}
-                                            iconName="ChevronDownMed"
-                                            text="Open with"
-                                            title="Open file by selected method"
-                                            menuItems={openWithMenuItems}
-                                        />
-                                    </div>
+                            <div className={styles.header}>
+                                <div className={styles.leftAlign}>
+                                    <Pagination className={styles.pagination} />
                                 </div>
-                            ) : (
-                                <div className={styles.titleRow}>
-                                    <h4>Metadata</h4>
-                                    <TransparentIconButton
-                                        className={styles.clearButton}
-                                        iconName="Clear"
-                                        onClick={props.onClose}
+                                {/* spacing component */}
+                                <div className={styles.gutter}></div>
+                                <div className={styles.rightAlign}>
+                                    <Tooltip content={disabledDownloadReason}>
+                                        <TertiaryButton
+                                            className={styles.tertiaryButton}
+                                            disabled={isDownloadDisabled}
+                                            iconName="Download"
+                                            id="download-file-button"
+                                            title={`Download file ${truncatedFileName} to local system`}
+                                            onClick={onDownload}
+                                        />
+                                    </Tooltip>
+                                    <PrimaryButton
+                                        id={Tutorial.OPEN_WITH_ID}
+                                        className={styles.openWithButton}
+                                        iconName="ChevronDownMed"
+                                        text="Open with"
+                                        title="Open file by selected method"
+                                        menuItems={openWithMenuItems}
                                     />
+                                    {props.onClose && (
+                                        <TransparentIconButton
+                                            className={styles.clearButton}
+                                            iconName="Clear"
+                                            onClick={props.onClose}
+                                        />
+                                    )}
                                 </div>
-                            )}
-                            <p
-                                className={classNames(styles.fileName, {
-                                    [styles.leftAlign]: !!props.onClose,
-                                })}
-                            >
-                                {props.fileDetails?.name}
-                            </p>
+                            </div>
+                            <p className={styles.fileName}>{props.fileDetails?.name}</p>
                             <div
                                 className={classNames(styles.thumbnailContainer, {
                                     [styles.thumbnailContainerClickable]: isThumbnailClickable,
@@ -168,9 +158,7 @@ export default function FileDetails(props: Props) {
                                 }}
                                 role={isThumbnailClickable ? "button" : undefined}
                                 tabIndex={isThumbnailClickable ? 0 : undefined}
-                                title={
-                                    isThumbnailClickable ? "Click to enlarge" : undefined
-                                }
+                                title={isThumbnailClickable ? "Click to enlarge" : undefined}
                             >
                                 <FileThumbnail
                                     className={styles.thumbnail}
@@ -200,24 +188,23 @@ export default function FileDetails(props: Props) {
                                     }}
                                 />
                             </Modal>
-                            {!props.onClose && (
-                                <div className={styles.titleRow}>
-                                    <h4>Metadata</h4>
-                                    {hasProvenanceSource && (
-                                        <DefaultButton
-                                            onClick={() =>
-                                                dispatch(
-                                                    interaction.actions.setOriginForProvenance(
-                                                        props.fileDetails
-                                                    )
+                            <div className={styles.titleRow}>
+                                <h4>Metadata</h4>
+                                {/* To do: un-hide the provenance source button while in graph mode, should redraw graph */}
+                                {hasProvenanceSource && !props.onClose && (
+                                    <DefaultButton
+                                        onClick={() =>
+                                            dispatch(
+                                                interaction.actions.setOriginForProvenance(
+                                                    props.fileDetails
                                                 )
-                                            }
-                                        >
-                                            View provenance
-                                        </DefaultButton>
-                                    )}
-                                </div>
-                            )}
+                                            )
+                                        }
+                                    >
+                                        View provenance
+                                    </DefaultButton>
+                                )}
+                            </div>
                             <FileAnnotationList
                                 className={styles.annotationList}
                                 fileDetails={props.fileDetails}
diff --git a/packages/core/components/NetworkGraph/NetworkGraph.module.css b/packages/core/components/NetworkGraph/NetworkGraph.module.css
index fc6dc87cd..0b111a8dc 100644
--- a/packages/core/components/NetworkGraph/NetworkGraph.module.css
+++ b/packages/core/components/NetworkGraph/NetworkGraph.module.css
@@ -10,6 +10,31 @@
   stroke: var(--primary-text-color);
 }
 
+.reset-button {
+  width: unset;
+  color: var(--primary-text-color);
+  border: none;
+  position: absolute;
+  z-index: 100;
+  right: 0;
+  margin: 10px;
+}
+
+.reset-button i {
+  font-weight: 400;
+  padding-right: 8px;
+}
+
+/* Use sentence case */
+.reset-button span {
+  font-weight: 400;
+  text-transform: lowercase;
+}
+
+.reset-button span:first-letter {
+  text-transform: uppercase;
+}
+
 .simple-container {
   display: flex;
 }
diff --git a/packages/core/components/NetworkGraph/Nodes/FileNode.module.css b/packages/core/components/NetworkGraph/Nodes/FileNode.module.css
index fac34cffa..d00f11c5e 100644
--- a/packages/core/components/NetworkGraph/Nodes/FileNode.module.css
+++ b/packages/core/components/NetworkGraph/Nodes/FileNode.module.css
@@ -6,7 +6,7 @@
 .file-node {
   height: unset;
   background-color: var(--primary-dark);
-  border: 1px solid var(--primary-text-color);
+  border: 1px solid var(--border-secondary-color);
   color: var(--primary-text-color);
   padding: 10px;
   border-radius: 5px;
@@ -27,7 +27,10 @@
 }
 
 .current-file {
+  background-color: var(--aqua);
   border-color: var(--highlight-background-color);
+  color: var(--highlight-text-color);
+  font-weight: 600;
 }
 
 .handle {
diff --git a/packages/core/components/NetworkGraph/Nodes/MetadataNode.module.css b/packages/core/components/NetworkGraph/Nodes/MetadataNode.module.css
index 26427b714..dcd259b23 100644
--- a/packages/core/components/NetworkGraph/Nodes/MetadataNode.module.css
+++ b/packages/core/components/NetworkGraph/Nodes/MetadataNode.module.css
@@ -5,7 +5,7 @@
 
 .node {
   background-color: var(--primary-dark);
-  border: 1px solid var(--primary-text-color);
+  border: 1px solid var(--border-secondary-color);
   border-radius: 5px;
   color: var(--primary-text-color);
   display: flex;
diff --git a/packages/core/components/NetworkGraph/index.tsx b/packages/core/components/NetworkGraph/index.tsx
index 42967bd03..117297c73 100644
--- a/packages/core/components/NetworkGraph/index.tsx
+++ b/packages/core/components/NetworkGraph/index.tsx
@@ -1,13 +1,23 @@
 import { SpinnerSize } from "@fluentui/react";
-import { Edge, ReactFlow, EdgeTypes, useNodesState, useEdgesState } from "@xyflow/react";
+import {
+    Edge,
+    ReactFlow,
+    EdgeTypes,
+    useNodesState,
+    useEdgesState,
+    Controls,
+    useReactFlow,
+    ReactFlowProvider,
+} from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import classNames from "classnames";
 import React from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import DefaultEdge from "./Edges/DefaultEdge";
 import FileNode from "./Nodes/FileNode";
 import MetadataNode from "./Nodes/MetadataNode";
+import { TertiaryButton } from "../Buttons";
 import LoadingIcon from "../Icons/LoadingIcon";
 import {
     AnnotationEdge,
@@ -36,19 +46,27 @@ const NODE_TYPES = {
 /**
  * Component for rendering a graph at the given origin
  */
-export default function NetworkGraph(props: NetworkGraphProps) {
+function NetworkGraph(props: NetworkGraphProps) {
+    const dispatch = useDispatch();
     const graph = useSelector(interaction.selectors.getGraph);
     const isLoading = useSelector(interaction.selectors.isGraphLoading);
     const refreshKey = useSelector(interaction.selectors.getGraphRefreshKey);
     const provenanceSource = useSelector(selection.selectors.getSelectedSourceProvenance);
     const [edges, setEdges, onEdgesChange] = useEdgesState<Edge<AnnotationEdge>>([]);
     const [nodes, setNodes, onNodesChange] = useNodesState<FileNodeType | MetadataNodeType>([]);
+    const { fitView } = useReactFlow();
 
     // Unfortunately we have to have some notion of state at a high level for control from the components
     // and at the dagre level for when the user does a drag action causing this duplication of efforts
     React.useEffect(() => {
-        setEdges(graph.edges);
-        setNodes(graph.nodes);
+        let cancel = false;
+        if (!cancel) {
+            setEdges(graph.edges);
+            setNodes(graph.nodes);
+        }
+        return function cleanup() {
+            cancel = true;
+        };
     }, [graph, setEdges, setNodes, refreshKey]);
 
     // The option to open this graph shouldn't even appear when a
@@ -65,16 +83,30 @@ export default function NetworkGraph(props: NetworkGraphProps) {
         );
     }
 
+    const onClickReset = () => {
+        graph.resetLayout(); // return to default layout if any
+        fitView(); // reset zoom
+        dispatch(interaction.actions.refreshGraph());
+    };
+
     return (
         <div className={props.className}>
+            <TertiaryButton
+                className={styles.resetButton}
+                iconName="Refresh"
+                text="Reset view"
+                title="Reset graph to initial state"
+                onClick={onClickReset}
+            />
             <ReactFlow
                 fitView
                 onlyRenderVisibleElements
                 className={styles.graph}
                 edgesFocusable={false}
+                nodesDraggable={false}
                 nodesConnectable={false}
                 nodesFocusable={false}
-                elementsSelectable={false}
+                elementsSelectable={true}
                 edgesReconnectable={false}
                 colorMode="dark"
                 nodes={nodes}
@@ -84,7 +116,19 @@ export default function NetworkGraph(props: NetworkGraphProps) {
                 proOptions={{ hideAttribution: true }}
                 onNodesChange={onNodesChange}
                 onEdgesChange={onEdgesChange}
-            />
+            >
+                <Controls showInteractive={false} />
+            </ReactFlow>
         </div>
     );
 }
+
+// The ReactFlow component can only access state (useReactFlow) if it's the child of a ReactFlowProvider
+// See https://reactflow.dev/learn/troubleshooting/common-errors#001
+export default function WrappedNetworkGraph(props: NetworkGraphProps) {
+    return (
+        <ReactFlowProvider>
+            <NetworkGraph {...props} />
+        </ReactFlowProvider>
+    );
+}
diff --git a/packages/core/components/RelationshipDiagram/index.tsx b/packages/core/components/RelationshipDiagram/index.tsx
index b059826f1..e1cb0b535 100644
--- a/packages/core/components/RelationshipDiagram/index.tsx
+++ b/packages/core/components/RelationshipDiagram/index.tsx
@@ -30,7 +30,7 @@ export default function RelationshipDiagram({ className, origin }: Props) {
                     onClick={() => dispatch(interaction.actions.setOriginForProvenance(undefined))}
                     title="Close provenance relationship diagram"
                 />
-                <h2>Provenance for {origin?.name}</h2>
+                <h2>Relationship diagram for {origin?.name}</h2>
             </div>
             <NetworkGraph className={styles.networkGraph} />
         </div>
diff --git a/packages/core/entity/Graph/index.ts b/packages/core/entity/Graph/index.ts
index 44952da33..cc5a910f5 100644
--- a/packages/core/entity/Graph/index.ts
+++ b/packages/core/entity/Graph/index.ts
@@ -9,7 +9,7 @@ import FileService, { FmsFileAnnotation } from "../../services/FileService";
 const FILE_NODE_WIDTH = 110;
 const FILE_NODE_HEIGHT = 125;
 const METADATA_NODE_WIDTH = 180;
-const METADATA_NODE_HEIGHT = 45;
+const METADATA_NODE_HEIGHT = 90;
 const ROW_SPACING = Math.max(FILE_NODE_HEIGHT, METADATA_NODE_HEIGHT) + 25;
 const COLUMN_SPACING = Math.max(FILE_NODE_WIDTH, METADATA_NODE_WIDTH) + 25;
 
@@ -330,6 +330,13 @@ export default class Graph {
             .setDefaultEdgeLabel(() => ({}));
     }
 
+    /**
+     * Reset the layout of the graph to its default (tree view)
+     */
+    public resetLayout() {
+        dagre.layout(this.graph);
+    }
+
     /**
      * Position nodes within graph according to edge connections and
      * height/width of individual nodes
diff --git a/packages/core/styles/global.css b/packages/core/styles/global.css
index 7757e22db..76a503e39 100644
--- a/packages/core/styles/global.css
+++ b/packages/core/styles/global.css
@@ -55,6 +55,7 @@ body {
     --secondary-dark: #1c1c1c;
     --accent-dark: #3d3d3d;
     --medium-grey: #575859;
+    --med-light-grey: #999;
     --light-grey: #BFBFBF;
     --white: #ffffff;
     --red: #c23030;
@@ -70,6 +71,7 @@ body {
     --highlight-hover-background-color: var(--bright-aqua);
     --highlight-hover-text-color: var(--white);
     --border-color: var(--medium-grey);
+    --border-secondary-color: var(--med-light-grey);
     --error-background-color: var(--red);
     --error-text-color: var(--white);
     --aqua-secondary-hover: rgba(13, 187, 206, 0.18);