diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
index c6ac318e..40a3a247 100644
--- a/src/components/Graph/Graph.tsx
+++ b/src/components/Graph/Graph.tsx
@@ -12,42 +12,43 @@ import ReactFlow, {
   Edge,
   useNodesState,
   useEdgesState,
-  Controls,
   Background,
   ReactFlowProvider,
   SelectionMode,
   useOnSelectionChange,
   Panel,
+  useUpdateNodeInternals,
 } from "reactflow";
-import LandingPage from "./LandingPage/LandingPage";
+import "reactflow/dist/style.css";
+import { Transition } from "@headlessui/react";
+
+import { AddressAnalysis } from "../../api/model";
 
 import {
   createAddressNode,
   AddressNodeState,
   AddressNode,
 } from "./custom_elements/nodes/AddressNode";
-
 import {
   TransfershipEdge,
-  TransfershipEdgeStates
+  TransfershipEdgeStates,
 } from "./custom_elements/edges/TransfershipEdge";
 
 import {
   convertEdgeListToRecord,
+  calculateLayoutedElements,
   convertNodeListToRecord,
   calculateNewAddressPath,
-  calculatedNewFocusedAddress,
   calculateAddTransfershipEdges,
 } from "./graph_calculations";
 
-import "reactflow/dist/style.css";
 import DraggableWindow from "./AnalysisWindow/AnalysisWindow";
+import LandingPage from "./LandingPage/LandingPage";
+import Hotbar from "./Hotbar";
 import Legend from "./Legend";
-import { AddressAnalysis } from "../../api/model";
 import TransactionTooltip, {
   TransactionTooltipProps,
 } from "./TransactionTooltip";
-import { Transition } from "@headlessui/react";
 
 /* Pan on drag settings */
 const panOnDrag = [1, 2];
@@ -63,14 +64,14 @@ interface GraphContextProps {
     incoming: boolean,
     volume: number,
   ) => void;
-  focusOnAddress: (address: string) => void;
   addEdges: (newEdges: Edge[]) => void;
-  isAddressFocused: (address: string) => boolean;
   setEdgeState: (edgeID: string, state: TransfershipEdgeStates) => void;
   getEdgeVolumeScale: (volume: number) => number;
   getEdgeHandleID: (edgeID: string) => string;
   setFocusedAddressData: (data: AddressAnalysis | null) => void;
   setHoveredTransferData: (data: TransactionTooltipProps | null) => void;
+  copyLink: () => void;
+  doLayout: () => void;
   focusedAddressData: AddressAnalysis | null;
 }
 
@@ -82,9 +83,19 @@ export const GraphContext = createContext<GraphContextProps>(
    Reference: https://reactflow.dev/api-reference/react-flow-provider#notes */
 interface GraphProviderProps {
   initialAddresses: string[];
+  initialPaths: string[];
 }
 
-const GraphProvider: FC<GraphProviderProps> = ({ initialAddresses }) => {
+/** GraphProvider simply wraps the ReactFlowProvider and provides the initial nodes
+ * for the graph to start. This is required due to the way ReactFlow works.
+ * @param initialAddresses the addresses to start the graph with
+ * @returns
+ */
+
+const GraphProvider: FC<GraphProviderProps> = ({
+  initialAddresses,
+  initialPaths,
+}) => {
   // Grab all initial addresses and create nodes for them
   const initialNodes = useMemo(() => {
     const nodes: Node[] = [];
@@ -94,10 +105,36 @@ const GraphProvider: FC<GraphProviderProps> = ({ initialAddresses }) => {
     return nodes;
   }, [initialAddresses]);
 
+  const initialEdges = useMemo(() => {
+    const edges: Edge[] = [];
+    initialPaths.forEach((path) => {
+      const [source, target] = path.split("-");
+      if (source && target) {
+        edges.push({
+          id: `${source}-${target}`,
+          source: source,
+          target: target,
+          sourceHandle: "a",
+          targetHandle: "a",
+          type: "TransfershipEdge",
+          data: {
+            state: TransfershipEdgeStates.REVEALED,
+            volume: 0,
+          },
+        });
+      }
+    });
+    return edges;
+  }, [initialPaths]);
+
+  // We make sure to calculate the layouted nodes and edges before rendering
   return (
     <div style={{ height: "100%" }}>
       <ReactFlowProvider>
-        <GraphProvided initialNodes={initialNodes} />
+        <GraphProvided
+          initialNodes={calculateLayoutedElements(initialNodes, initialEdges)}
+          initialEdges={initialEdges}
+        />
       </ReactFlowProvider>
     </div>
   );
@@ -105,12 +142,29 @@ const GraphProvider: FC<GraphProviderProps> = ({ initialAddresses }) => {
 
 interface GraphProvidedProps {
   initialNodes: Node[];
+  initialEdges: Edge[];
 }
 
-const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
+/** GraphProvided is the main component that renders the graph and handles
+ * most logic. It is wrapped by GraphProvider for the ReactFlowProvider.
+ * @param initialNodes the initial nodes to start the graph with
+ */
+const GraphProvided: FC<GraphProvidedProps> = ({
+  initialNodes,
+  initialEdges,
+}) => {
+  const updateNodeInternals = useUpdateNodeInternals();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const [selectedNodes, setSelectedNodes] = useState<string[]>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  // Go through each node and update node internals
+  useEffect(() => {
+    nodes.forEach((node) => {
+      updateNodeInternals(node.id);
+    });
+  }, [nodes]);
+
+  // Record Optimization -------------------------------------------------------
 
   /* For performance reasons, we store the edges and nodes
    * in a ref so lookups are O(1) instead of O(n) */
@@ -125,6 +179,8 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
     };
   }, [edges]);
 
+  // Dynamic Edge Handles ------------------------------------------------------
+
   /* We want the edge handles to change dynamically depending on the position
    * of their source and target. Whenever a node's position changes:
    * - Get all the edges connected to that node
@@ -195,23 +251,33 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
     return "";
   }
 
+  // Dynamic Edge Weighting ---------------------------------------------------
+
   /* Edges each have a volume associated and we want to scale their width
-   * based on that. As such, we calculate the max and min volume of all visible
-   * edges and get a function to scale the volume of an edge between 0 and 1. */
-  const { minEdgeVolume, maxEdgeVolume } = useMemo(() => {
-    let newMinEdgeVolume = Infinity;
-    let newMaxEdgeVolume = -Infinity;
+   * based on that. As such, we grade them on a curve similar to university
+   * grading curves. */
+  const { meanVolume, volumeStandardDeviation } = useMemo(() => {
+    let totalVolume = 0;
+    let totalVariance = 0;
 
     edges.forEach((edge) => {
-      if (edge.data.state === TransfershipEdgeStates.REVEALED) {
-        newMinEdgeVolume = Math.min(newMinEdgeVolume, edge.data.volume);
-        newMaxEdgeVolume = Math.max(newMaxEdgeVolume, edge.data.volume);
+      if (
+        edge.data.state === TransfershipEdgeStates.REVEALED &&
+        (nodesRecord[edge.source] || nodesRecord[edge.target])
+      ) {
+        const volume: number = edge.data.volume;
+        totalVolume += volume;
+        totalVariance += Math.pow(volume, 2);
       }
     });
 
+    // Calculate the mean and standard deviation
+    const meanVolume = totalVolume / edges.length;
+    const volumeStandardDeviation = Math.sqrt(totalVariance / edges.length);
+
     return {
-      minEdgeVolume: newMinEdgeVolume,
-      maxEdgeVolume: newMaxEdgeVolume,
+      meanVolume: meanVolume || 1,
+      volumeStandardDeviation: volumeStandardDeviation || 1,
     };
   }, [edges]);
 
@@ -221,22 +287,17 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
    */
   const getEdgeVolumeScale = useCallback(
     (volume: number): number => {
-      const range = maxEdgeVolume - minEdgeVolume;
-      return range === 0 ? 0 : (volume - minEdgeVolume) / range;
+      return Math.min(
+        Math.max((volume - meanVolume) / volumeStandardDeviation, 0),
+        1,
+      );
     },
-    [maxEdgeVolume, minEdgeVolume],
+    [edges],
   );
 
-  // Node & Edge Manipulation Functions ---
+  // Mass Selection and deletion logic ----------------------------------------
 
-  /** Deletes multiple nodes and all edges connected to them
-   * @param ids the ids of the nodes to delete
-   */
-  function deleteNodes(ids: string[]) {
-    setNodes((nodes) => nodes.filter((node) => !ids.includes(node.id)));
-    setEdges((edges) => edges.filter((edge) => !ids.includes(edge.source)));
-    setEdges((edges) => edges.filter((edge) => !ids.includes(edge.target)));
-  }
+  const [selectedNodes, setSelectedNodes] = useState<string[]>([]);
 
   /** Updates selected nodes whenever a new selection is made */
   useOnSelectionChange({
@@ -245,29 +306,28 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
     },
   });
 
+  /** Deletes multiple nodes and all dangling edges connected to them
+   * @param ids the ids of the nodes to delete
+   */
+  function deleteNodes(ids: string[]) {
+    setNodes((nodes) => nodes.filter((node) => !ids.includes(node.id)));
+    setEdges((edges) =>
+      edges.filter(
+        (edge) =>
+          !ids.includes(edge.source) &&
+          !ids.includes(edge.target) &&
+          (nodesRecord[edge.source] || nodesRecord[edge.target]),
+      ),
+    );
+  }
+
   /** Deletes all selected nodes */
   function deleteSelectedNodes() {
     deleteNodes(selectedNodes);
     setSelectedNodes([]);
   }
 
-  /** Focuses on a specific address node, setting it to EXPANDED and everything else to MINIMIZED.
-   * Also pans the graph to the node.
-   * @param address the address to focus on
-   */
-  function focusOnAddress(address: string) {
-    // Calculate and set the new nodes
-    const newNodes = calculatedNewFocusedAddress(nodes, address);
-    setNodes(newNodes);
-  }
-
-  function isAddressFocused(address: string): boolean {
-    const node = nodesRecord[address];
-    if (node) {
-      return node.data.state === AddressNodeState.EXPANDED;
-    }
-    return false;
-  }
+  // Edge State Toggling ------------------------------------------------------
 
   function setEdgeState(edgeID: string, state: TransfershipEdgeStates) {
     const edge = edgesRecord[edgeID];
@@ -284,8 +344,10 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
     }
   }
 
+  // Path Expansion -----------------------------------------------------------
+
   function addAddressPaths(paths: string[][], incoming: boolean) {
-    // 1 - Calculate result of adding path to the graph
+    // Calculate result of adding path to the graph
     const { nodes: newNodes, edges: newEdges } = calculateNewAddressPath(
       nodes,
       edges,
@@ -293,10 +355,7 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
       incoming,
     );
 
-    // 2 - Calculate result of focusing on a node
-    // const focusedNodes = calculatedNewFocusedAddress(newNodes, finalNode.id);
-
-    // 3 - Set the new nodes and edges
+    // Set the new nodes and edges
     setNodes(newNodes);
     setEdges(newEdges);
   }
@@ -306,46 +365,102 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
     setEdges(newStateEdges);
   }
 
+  // Address Focusing ---------------------------------------------------------
+
   /* One address can be focused at a time. This is tracked using a useState.
    * When an address is focused, it shows up on the AnalysisWindow overlaid
-   * on top of the graph.
-   */
-  //
+   * on top of the graph. */
   const [focusedAddressData, setFocusedAddressData] =
     useState<AddressAnalysis | null>(null);
 
+  // Edge Hovering ------------------------------------------------------------
+
   const [hoveredTransferData, setHoveredTransferData] =
     useState<TransactionTooltipProps | null>(null);
 
+  // Automatic Layout ---------------------------------------------------------
+
+  function filterLayoutElements(): {
+    filteredNodes: Node[];
+    filteredEdges: Edge[];
+  } {
+    const filteredNodes = nodes;
+    const filteredEdges = edges.filter(
+      (edge) =>
+        edge.data.state === TransfershipEdgeStates.REVEALED &&
+        nodesRecord[edge.source] &&
+        nodesRecord[edge.target],
+    );
+    return { filteredNodes, filteredEdges };
+  }
+
+  function setLayoutedElements(
+    filteredNodes: Node[],
+    filteredEdges: Edge[],
+  ): void {
+    const newNodes = calculateLayoutedElements(filteredNodes, filteredEdges);
+
+    console.log("Setting new nodes");
+    setNodes(newNodes);
+  }
+
+  function doLayout(): void {
+    const { filteredNodes, filteredEdges } = filterLayoutElements();
+    setLayoutedElements(filteredNodes, filteredEdges);
+  }
+
+  // Link Share ----------------------------------------------------------------
+
+  function getLink(): string {
+    const addressIDs: string[] = nodes.map((node) => node.id);
+    const addressPaths: string[] = edges
+      .filter(
+        (edge) =>
+          edge.data.state === TransfershipEdgeStates.REVEALED &&
+          nodesRecord[edge.source] &&
+          nodesRecord[edge.target],
+      )
+      .map((edge) => [edge.source, edge.target])
+      .filter((edge) => edge[0] && edge[1])
+      .map((edge) => edge.join("-"));
+    return `${window.location.origin}?addresses=${addressIDs.join(
+      ",",
+    )}&paths=${addressPaths.join(",")}`;
+  }
+
+  function copyLink(): void {
+    navigator.clipboard.writeText(getLink());
+  }
+
   // Set up the context
   const graphContext: GraphContextProps = {
     addAddressPaths,
-    focusOnAddress,
     addEdges,
-    isAddressFocused,
     setEdgeState,
     getEdgeVolumeScale,
     getEdgeHandleID,
     setFocusedAddressData,
     setHoveredTransferData,
+    doLayout,
+    copyLink,
     focusedAddressData,
   };
 
   return (
     <>
-      <div
-        style={{ height: "100%" }}
-        onKeyDown={(event) => {
-          if (event.key === "Delete" || event.key === "Backspace") {
-            // Delete all selected nodes
-            deleteSelectedNodes();
-          }
-          if (event.key === "Escape") {
-            setFocusedAddressData(null);
-          }
-        }}
-      >
-        <GraphContext.Provider value={graphContext}>
+      <GraphContext.Provider value={graphContext}>
+        <div
+          className="h-full w-full"
+          onKeyDown={(event) => {
+            if (event.key === "Delete" || event.key === "Backspace") {
+              // Delete all selected nodes
+              deleteSelectedNodes();
+            }
+            if (event.key === "Escape") {
+              setFocusedAddressData(null);
+            }
+          }}
+        >
           <DraggableWindow
             analysisData={focusedAddressData}
             setFocusedAddressData={setFocusedAddressData}
@@ -363,9 +478,10 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
             panOnDrag={panOnDrag}
             selectionMode={SelectionMode.Partial}
             zoomOnDoubleClick={true}
+            className="h-full w-full"
           >
             <img
-              className="-z-10 m-auto w-full scale-150 opacity-40"
+              className="-z-10 m-auto w-full scale-150 animate-pulse opacity-40"
               aria-hidden="true"
               src="https://tailwindui.com/img/beams-home@95.jpg"
             />
@@ -383,38 +499,66 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
                 />
               )}
             </Panel>
-            <Controls position="bottom-right" showInteractive={false} />
+            <Panel position="bottom-left">
+              <Hotbar />
+            </Panel>
           </ReactFlow>
-        </GraphContext.Provider>
-      </div>
+        </div>
+      </GraphContext.Provider>
     </>
   );
 };
 
+/** Graph + Landing Page - These are combined into one component for easy
+ * animated transitions between the two. */
+
+const useURLSearchParams = () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const addresses = urlParams.get("addresses")?.split(",") || [];
+  const paths = urlParams.get("paths")?.split(",") || [];
+  return { addresses, paths };
+};
+
 const Graph: FC = () => {
-  const [searchedAddress, setSearchedAddress] = useState<string | null>(null);
+  const [searchedAddresses, setSearchedAddresses] = useState<string[]>([]);
+  const [searchedPaths, setSearchedPaths] = useState<string[]>([]);
+
+  useEffect(() => {
+    const { addresses, paths } = useURLSearchParams();
+    if (addresses.length && paths.length) {
+      setSearchedAddresses(addresses);
+      setSearchedPaths(paths);
+    }
+  }, []);
 
   return (
-    <div className="overflow-hidden">
+    <div className="h-full w-full overflow-hidden">
       <Transition
-        show={searchedAddress === null}
+        show={searchedAddresses.length === 0}
         appear={true}
         leave="transition-all duration-500"
         leaveFrom="opacity-100 scale-100"
         leaveTo="opacity-0 scale-50"
         className="fixed flex h-full w-full flex-col items-center justify-center"
       >
-        <LandingPage setSearchedAddress={setSearchedAddress} />
+        <LandingPage
+          setSearchedAddress={(address: string) => {
+            setSearchedAddresses([address]);
+          }}
+        />
       </Transition>
       <Transition
-        show={searchedAddress !== null}
+        show={searchedAddresses.length > 0}
         appear={true}
         enter="transition-all duration-500 delay-500"
         enterFrom="opacity-0 scale-150"
         enterTo="opacity-100 scale-100"
       >
-        {searchedAddress && (
-          <GraphProvider initialAddresses={[searchedAddress]} />
+        {searchedAddresses.length > 0 && (
+          <GraphProvider
+            initialAddresses={searchedAddresses}
+            initialPaths={searchedPaths}
+          />
         )}
       </Transition>
     </div>
diff --git a/src/components/Graph/Hotbar/Hotbar.tsx b/src/components/Graph/Hotbar/Hotbar.tsx
index e69de29b..b27bb4c9 100644
--- a/src/components/Graph/Hotbar/Hotbar.tsx
+++ b/src/components/Graph/Hotbar/Hotbar.tsx
@@ -0,0 +1,48 @@
+import { FC, useContext } from "react";
+import { RectangleGroupIcon, ShareIcon } from "@heroicons/react/24/solid";
+
+import { GraphContext } from "../Graph";
+
+interface HotbarButton {
+  onClick?: () => void;
+  Icon: any;
+  name: string;
+}
+
+const Hotbar: FC = () => {
+  const { doLayout, copyLink } = useContext(GraphContext);
+
+  const Buttons: HotbarButton[] = [
+    {
+      Icon: RectangleGroupIcon,
+      name: "Organize Layout",
+      onClick: doLayout,
+    },
+    {
+      Icon: ShareIcon,
+      name: "Copy Link",
+      onClick: copyLink,
+    },
+  ];
+
+  return (
+    <div className="mb-16 flex h-fit w-fit flex-col gap-y-1 rounded-lg bg-gray-800 p-2">
+      {Buttons.map((button) => {
+        return (
+          <button
+            className="group flex flex-row items-center"
+            key={button.name}
+            onClick={button.onClick}
+          >
+            <button.Icon className="h-10 w-10 rounded-lg p-1 text-blue-100 transition-all duration-200 hover:bg-gray-700 hover:text-blue-300" />
+            <h1 className="absolute ml-[3.25rem] mt-0.5 w-max rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-blue-300 opacity-0 shadow-sm transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-700">
+              {button.name}
+            </h1>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Hotbar;
diff --git a/src/components/Graph/Hotbar/index.tsx b/src/components/Graph/Hotbar/index.tsx
index e69de29b..19427a41 100644
--- a/src/components/Graph/Hotbar/index.tsx
+++ b/src/components/Graph/Hotbar/index.tsx
@@ -0,0 +1,3 @@
+import Hotbar from "./Hotbar";
+
+export default Hotbar;
diff --git a/src/components/Graph/LandingPage/LandingPage.tsx b/src/components/Graph/LandingPage/LandingPage.tsx
index 824d16c8..0a498a3c 100644
--- a/src/components/Graph/LandingPage/LandingPage.tsx
+++ b/src/components/Graph/LandingPage/LandingPage.tsx
@@ -4,16 +4,27 @@ import { FC } from "react";
 import logo from "../../../assets/ward-logo-blue-full.svg";
 import Searchbar from "./SearchBar";
 
+// TODO - Fill this with real juicy addressess
+const PossibleAddresses: string[] = [];
+
 interface LandingPageProps {
   setSearchedAddress: (address: string) => void;
 }
 
 const LandingPage: FC<LandingPageProps> = ({ setSearchedAddress }) => {
+  function selectRandomAddress() {
+    const randomIndex = Math.floor(Math.random() * PossibleAddresses.length);
+    setSearchedAddress(PossibleAddresses[randomIndex]);
+  }
+
   return (
     <div className="flex max-w-screen-sm flex-col items-center gap-y-10">
       <img src={logo} alt="Ward Logo" className="w-2/3" />
       <Searchbar className="w-full" onSearchAddress={setSearchedAddress} />
-      <h3 className="flex flex-row items-center gap-x-2 text-sm text-blue-500">
+      <h3
+        className="flex cursor-pointer flex-row items-center gap-x-2 text-sm text-blue-500"
+        onClick={selectRandomAddress}
+      >
         <SparklesIcon className="h-5 w-5 text-blue-500" aria-hidden="true" />
         I'm feeling lucky
       </h3>
diff --git a/src/components/Graph/TransactionTooltip.tsx b/src/components/Graph/TransactionTooltip.tsx
index 1920d8e1..f79a8c49 100644
--- a/src/components/Graph/TransactionTooltip.tsx
+++ b/src/components/Graph/TransactionTooltip.tsx
@@ -31,7 +31,7 @@ const TransactionTooltip: FC<TransactionTooltipProps> = ({
       </div>
 
       <h1 className="flex w-full flex-row justify-center gap-x-1 pt-1 text-center text-xs font-medium text-gray-400">
-        Click edge to <h1 className="font-bold text-gray-500">toggle</h1>
+        Click edge to <a className="font-bold text-gray-500">toggle</a>
         <EyeSlashIcon className="mt-0.5 inline-block h-4 w-4 text-gray-500" />
       </h1>
     </div>
diff --git a/src/components/Graph/custom_elements/nodes/AddressNode/AddressNode/AddressNode.tsx b/src/components/Graph/custom_elements/nodes/AddressNode/AddressNode/AddressNode.tsx
index 7d70ec3f..f2176afe 100644
--- a/src/components/Graph/custom_elements/nodes/AddressNode/AddressNode/AddressNode.tsx
+++ b/src/components/Graph/custom_elements/nodes/AddressNode/AddressNode/AddressNode.tsx
@@ -120,12 +120,14 @@ const AddressNode: FC<AddressNodeProps> = ({ data: { address } }) => {
         position={Position.Left}
         className="mb-2 opacity-0"
         id="a"
+        isConnectable={false}
       />
       <Handle
         type="source"
         position={Position.Right}
         className="mb-2 opacity-0"
         id="a"
+        isConnectable={false}
       />
       {/* Handle B - The edge flows from the right of a node to the left of another */}
       <Handle
@@ -133,12 +135,14 @@ const AddressNode: FC<AddressNodeProps> = ({ data: { address } }) => {
         position={Position.Right}
         className="mt-2 opacity-0"
         id="b"
+        isConnectable={false}
       />
       <Handle
         type="source"
         position={Position.Left}
         className="mt-2 opacity-0"
         id="b"
+        isConnectable={false}
       />
 
       <span
diff --git a/src/components/Graph/graph_calculations.tsx b/src/components/Graph/graph_calculations.tsx
index 689b67ec..9665dd3d 100644
--- a/src/components/Graph/graph_calculations.tsx
+++ b/src/components/Graph/graph_calculations.tsx
@@ -1,10 +1,14 @@
 import { Edge, Node, XYPosition } from "reactflow";
-import { TransfershipEdgeStates, createTransfershipEdge } from "./custom_elements/edges/TransfershipEdge";
+import {
+  TransfershipEdgeStates,
+  createTransfershipEdge,
+} from "./custom_elements/edges/TransfershipEdge";
 import {
   AddressNodeState,
   createAddressNode,
 } from "./custom_elements/nodes/AddressNode";
 
+import Dagre from "@dagrejs/dagre";
 
 // How much distance there should be between two nodes when calculating new address nodes positions
 const INTERSECTING_NODE_X_OFFSET = 300;
@@ -263,27 +267,47 @@ export function calculateNewAddressPath(
   return { nodes: nodesList, edges: edgesList, finalNode };
 }
 
-/** Calculates the new address to focus on and de-focus the rest.
- * @param nodes the list of nodes
- * @param address the address to focus on
- * @returns the new list of nodes
+/** Calculates the layout of the graph using dagre.
+ * @param dagreGraph The dagre graph object to use. Already setup by default
+ * @param nodes Nodes to take into account
+ * @param edges Edges to take into account
+ * @param direction The direction of the graph
+ * @returns The new lists of nodes and edges
  */
 
-export function calculatedNewFocusedAddress(
+export function calculateLayoutedElements(
   nodes: Node[],
-  address: string,
+  edges: Edge[],
+  direction = "LR",
 ): Node[] {
-  // Iterate over all nodes and set them to MINIMIZED except the one we want to focus on
-  const newNodes = nodes.map((node) => {
-    if (node.id === address) {
-      return {
-        ...node,
-        data: { ...node.data, state: AddressNodeState.EXPANDED },
-      };
-    } else {
-      return {
-        ...node,
-        data: { ...node.data, state: AddressNodeState.MINIMIZED },
+  const dagreGraph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({
+    rankdir: direction,
+    ranksep: 100,
+    nodesep: 100,
+  });
+
+  nodes.forEach((node) => {
+    dagreGraph.setNode(node.id, {
+      width: node.width ? node.width : 200,
+      height: node.height ? node.height : 50,
+    });
+  });
+
+  edges.forEach((edge) => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  Dagre.layout(dagreGraph);
+
+  const newNodes: Node[] = [...nodes];
+
+  dagreGraph.nodes().forEach((nodeId) => {
+    const node = newNodes.find((n) => n.id === nodeId);
+    if (node) {
+      node.position = {
+        x: dagreGraph.node(nodeId).x,
+        y: dagreGraph.node(nodeId).y,
       };
     }
   });
diff --git a/src/templates/GraphTemplate.tsx b/src/templates/GraphTemplate.tsx
index bc09a1ce..6f363048 100644
--- a/src/templates/GraphTemplate.tsx
+++ b/src/templates/GraphTemplate.tsx
@@ -3,7 +3,7 @@ import Graph from "../components/Graph";
 
 const GraphTemplate: FC = () => {
   return (
-    <div className="flex h-screen flex-col">
+    <div className="h-screen w-screen">
       <Graph />
     </div>
   );