diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
index fd47d29cde048027fef50831b86194e705703e51..8847725916650ab33e538def88d9e52efee191fb 100644
--- a/src/layout/Layout.tsx
+++ b/src/layout/Layout.tsx
@@ -1,7 +1,6 @@
-import { Reducer, useCallback, useMemo, useReducer, useRef } from "react";
+import React, { Reducer, useCallback, useMemo, useReducer, useRef } from "react";
 
 import { HeaderProps } from "../components/header/Header";
-import React from "react";
 import { observer } from "mobx-react-lite";
 import { styles } from "./Layout.styles";
 
@@ -70,23 +69,22 @@ export const Layout: React.FunctionComponent<LayoutProps> = observer(props => {
 		if (props.layoutOptions) optionsSource.push(props.layoutOptions);
 
 		if (routeKeyRef.current === props.routeKey) optionsSource.push(options);
-		else routeKeyRef.current = props.routeKey;
+		else {
+			dispatchOptions({ type: "reset" });
+			routeKeyRef.current = props.routeKey;
+		}
 
 		return mergeLayoutOptions(...optionsSource);
 	}, [options, props.layoutOptions, props.routeKey]);
 	const mergedOptionsRef = useRef<RecursivePartial<LayoutOptions>>(mergedOptions);
-	React.useEffect(() => {
-		mergedOptionsRef.current = mergedOptions;
-	}, []);
+	mergedOptionsRef.current = mergedOptions;
 
-	const setLayoutOptions = useCallback<SetLayoutOptions>(
-		newOptions =>
-			dispatchOptions({
-				type: "update",
-				newOptions: typeof newOptions === "function" ? newOptions(mergedOptionsRef.current) : newOptions,
-			}),
-		[]
-	);
+	const setLayoutOptions = useCallback<SetLayoutOptions>(newOptions => {
+		dispatchOptions({
+			type: "update",
+			newOptions: typeof newOptions === "function" ? newOptions(mergedOptionsRef.current) : newOptions,
+		});
+	}, []);
 
 	return (
 		<LayoutContext.Provider value={setLayoutOptions}>