diff --git a/components/postcard/Postcard.tsx b/components/postcard/Postcard.tsx
index 4ca2d5c..ff02d03 100644
--- a/components/postcard/Postcard.tsx
+++ b/components/postcard/Postcard.tsx
@@ -8,7 +8,7 @@ type PostcardProps = {
 }
 
 export function Postcard({src}: PostcardProps) {
-    const [, setPostcard] = useDefinedContext(PostcardContext)
+    const {setPostcard} = useDefinedContext(PostcardContext)
 
     useEffect(
         () => {
diff --git a/components/postcard/PostcardContext.tsx b/components/postcard/PostcardContext.tsx
index 2f894eb..bbfa68f 100644
--- a/components/postcard/PostcardContext.tsx
+++ b/components/postcard/PostcardContext.tsx
@@ -1,7 +1,15 @@
-import { createStateContext } from "../../utils/stateContext";
+import { createDefinedContext } from "../../utils/definedContext";
+
+
+export type PostcardContextValue = {
+    postcard: string,
+    setPostcard: React.Dispatch<React.SetStateAction<string>>,
+    visible: boolean,
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>,
+}
 
 
 /**
  * Context containing data about the website's current postcard, the blurred background image.
  */
-export const PostcardContext = createStateContext<string>()
+export const PostcardContext = createDefinedContext<PostcardContextValue>()
diff --git a/components/postcard/PostcardRenderer.tsx b/components/postcard/PostcardRenderer.tsx
index 50e66dc..2dc04f2 100644
--- a/components/postcard/PostcardRenderer.tsx
+++ b/components/postcard/PostcardRenderer.tsx
@@ -1,14 +1,20 @@
 import { PostcardContext } from "./PostcardContext"
 import { useDefinedContext } from "../../utils/definedContext";
+import classNames from "classnames";
 
 
 export function PostcardRenderer() {
-    const [postcard,] = useDefinedContext(PostcardContext)
+    const {postcard, visible} = useDefinedContext(PostcardContext)
 
     return <>
         <div
-            className="postcard"
-            style={{backgroundImage: `url(${postcard})`}}
+            className={classNames({
+                "postcard": true,
+                "postcard-visible": visible,
+            })}
+            style={{
+                backgroundImage: `url(${postcard})`
+            }}
         />
     </>
 }
\ No newline at end of file
diff --git a/components/tools/ToolToggleVisible.tsx b/components/tools/ToolToggleVisible.tsx
new file mode 100644
index 0000000..70c33b3
--- /dev/null
+++ b/components/tools/ToolToggleVisible.tsx
@@ -0,0 +1,20 @@
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons"
+import { useTranslation } from "next-i18next"
+import { useDefinedContext } from "../../utils/definedContext"
+import { FestaIcon } from "../extensions/FestaIcon"
+import { PostcardContext } from "../postcard/PostcardContext"
+
+export function ToolToggleVisible() {
+    const {t} = useTranslation()
+    const {visible, setVisible} = useDefinedContext(PostcardContext)
+
+    return (
+        <button 
+            aria-label={visible ? t("toggleVisibleHide") : t("toggleVisibleShow")}
+            onClick={() => setVisible(!visible)}
+            className="square-40"
+        >
+            <FestaIcon icon={visible ? faEyeSlash : faEye}/>
+        </button>
+    )
+}
\ No newline at end of file
diff --git a/pages/_app.tsx b/pages/_app.tsx
index af49cce..95a6515 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -18,6 +18,7 @@ import { ErrorBoundary } from '../components/errors/ErrorBoundary'
 const App = ({ Component, pageProps }: AppProps): JSX.Element => {
     const {t} = useTranslation()
     const [postcard, setPostcard] = useState<string>(defaultPostcard.src)
+    const [postcardVisible, setPostcardVisible] = useState<boolean>(false)
     const [login, setLogin] = useState<FestaLoginData | null>(null)
     useStoredLogin(setLogin)
 
@@ -34,7 +35,7 @@ const App = ({ Component, pageProps }: AppProps): JSX.Element => {
 
     return <>
         <ErrorBoundary text={t("genericError")}>
-        <PostcardContext.Provider value={[postcard, setPostcard]}>
+        <PostcardContext.Provider value={{postcard, setPostcard, visible: postcardVisible, setVisible: setPostcardVisible}}>
         <LoginContext.Provider value={[login, setLogin]}>
         <SWRConfig value={swrConfig}>
             <PostcardRenderer/>
diff --git a/pages/events/[slug].tsx b/pages/events/[slug].tsx
index 31c22a2..dd71f76 100644
--- a/pages/events/[slug].tsx
+++ b/pages/events/[slug].tsx
@@ -16,6 +16,7 @@ import { EditablePostcard } from "../../components/editable/EditablePostcard";
 import { ViewEvent } from "../../components/view/ViewEvent";
 import { EditableDateTime } from "../../components/editable/EditableDateTime";
 import { FormDateRange } from "../../components/FormDateRange";
+import { ToolToggleVisible } from "../../components/tools/ToolToggleVisible";
 
 
 export async function getServerSideProps(context: NextPageContext) {
@@ -77,6 +78,7 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
         <EditingContext.Provider value={editState}>
             <ToolBar vertical="vadapt" horizontal="right">
                 <ToolToggleEditing/>
+                <ToolToggleVisible/>
             </ToolBar>
             <ViewEvent
                 title={
diff --git a/styles/components/postcard.css b/styles/components/postcard.css
index 6d4da6d..04b7726 100644
--- a/styles/components/postcard.css
+++ b/styles/components/postcard.css
@@ -13,3 +13,8 @@
     user-select: none;
     pointer-events: none;
 }
+
+.postcard-visible {
+    z-index: 1;
+    filter: none;
+}
\ No newline at end of file
diff --git a/styles/components/toolbar.css b/styles/components/toolbar.css
index 9ba11f6..50e5902 100644
--- a/styles/components/toolbar.css
+++ b/styles/components/toolbar.css
@@ -5,33 +5,40 @@
     align-content: flex-start;
 
     position: absolute;
+
+    z-index: 2;
+
+    gap: 2px;
 }
 
 .toolbar-top {
     top: 8px;
+    flex-direction: column;
 }
 
 .toolbar-bottom {
     bottom: 8px;
+    flex-direction: column-reverse;
 }
 
 .toolbar-left {
     left: 8px;
-    flex-direction: row;
 }
 
 .toolbar-right {
     right: 8px;
-    flex-direction: row-reverse;
 }
 
 .toolbar-vadapt {
     top: 8px;
+    flex-direction: column;
 }
 
 @media (max-width: 800px) {
     .toolbar-vadapt {
         top: unset;
         bottom: 8px;
+
+        flex-direction: column-reverse;
     }
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 068b482..8e5abb2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -249,9 +249,9 @@
     "@types/react" "*"
 
 "@types/react@*":
-  version "18.0.10"
-  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.10.tgz#5692944d4a45e204fb7a981eb1388afe919cf4d0"
-  integrity sha512-dIugadZuIPrRzvIEevIu7A1smqOAjkSMv8qOfwPt9Ve6i6JT/FQcCHyk2qIAxwsQNKZt5/oGR0T4z9h2dXRAkg==
+  version "18.0.12"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz#cdaa209d0a542b3fcf69cf31a03976ec4cdd8840"
+  integrity sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -277,47 +277,47 @@
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
 "@typescript-eslint/parser@^5.21.0":
-  version "5.27.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.0.tgz#62bb091ed5cf9c7e126e80021bb563dcf36b6b12"
-  integrity sha512-8oGjQF46c52l7fMiPPvX4It3u3V3JipssqDfHQ2hcR0AeR8Zge+OYyKUCm5b70X72N1qXt0qgHenwN6Gc2SXZA==
+  version "5.27.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.1.tgz#3a4dcaa67e45e0427b6ca7bb7165122c8b569639"
+  integrity sha512-7Va2ZOkHi5NP+AZwb5ReLgNF6nWLGTeUJfxdkVUAPPSaAdbWNnFZzLZ4EGGmmiCTg+AwlbE1KyUYTBglosSLHQ==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.27.0"
-    "@typescript-eslint/types" "5.27.0"
-    "@typescript-eslint/typescript-estree" "5.27.0"
+    "@typescript-eslint/scope-manager" "5.27.1"
+    "@typescript-eslint/types" "5.27.1"
+    "@typescript-eslint/typescript-estree" "5.27.1"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.27.0":
-  version "5.27.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.0.tgz#a272178f613050ed62f51f69aae1e19e870a8bbb"
-  integrity sha512-VnykheBQ/sHd1Vt0LJ1JLrMH1GzHO+SzX6VTXuStISIsvRiurue/eRkTqSrG0CexHQgKG8shyJfR4o5VYioB9g==
+"@typescript-eslint/scope-manager@5.27.1":
+  version "5.27.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.1.tgz#4d1504392d01fe5f76f4a5825991ec78b7b7894d"
+  integrity sha512-fQEOSa/QroWE6fAEg+bJxtRZJTH8NTskggybogHt4H9Da8zd4cJji76gA5SBlR0MgtwF7rebxTbDKB49YUCpAg==
   dependencies:
-    "@typescript-eslint/types" "5.27.0"
-    "@typescript-eslint/visitor-keys" "5.27.0"
+    "@typescript-eslint/types" "5.27.1"
+    "@typescript-eslint/visitor-keys" "5.27.1"
 
-"@typescript-eslint/types@5.27.0":
-  version "5.27.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.0.tgz#c3f44b9dda6177a9554f94a74745ca495ba9c001"
-  integrity sha512-lY6C7oGm9a/GWhmUDOs3xAVRz4ty/XKlQ2fOLr8GAIryGn0+UBOoJDWyHer3UgrHkenorwvBnphhP+zPmzmw0A==
+"@typescript-eslint/types@5.27.1":
+  version "5.27.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.1.tgz#34e3e629501349d38be6ae97841298c03a6ffbf1"
+  integrity sha512-LgogNVkBhCTZU/m8XgEYIWICD6m4dmEDbKXESCbqOXfKZxRKeqpiJXQIErv66sdopRKZPo5l32ymNqibYEH/xg==
 
-"@typescript-eslint/typescript-estree@5.27.0":
-  version "5.27.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.0.tgz#7965f5b553c634c5354a47dcce0b40b94611e995"
-  integrity sha512-QywPMFvgZ+MHSLRofLI7BDL+UczFFHyj0vF5ibeChDAJgdTV8k4xgEwF0geFhVlPc1p8r70eYewzpo6ps+9LJQ==
+"@typescript-eslint/typescript-estree@5.27.1":
+  version "5.27.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.1.tgz#7621ee78607331821c16fffc21fc7a452d7bc808"
+  integrity sha512-DnZvvq3TAJ5ke+hk0LklvxwYsnXpRdqUY5gaVS0D4raKtbznPz71UJGnPTHEFo0GDxqLOLdMkkmVZjSpET1hFw==
   dependencies:
-    "@typescript-eslint/types" "5.27.0"
-    "@typescript-eslint/visitor-keys" "5.27.0"
+    "@typescript-eslint/types" "5.27.1"
+    "@typescript-eslint/visitor-keys" "5.27.1"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/visitor-keys@5.27.0":
-  version "5.27.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.0.tgz#97aa9a5d2f3df8215e6d3b77f9d214a24db269bd"
-  integrity sha512-46cYrteA2MrIAjv9ai44OQDUoCZyHeGIc4lsjCUX2WT6r4C+kidz1bNiR4017wHOPUythYeH+Sc7/cFP97KEAA==
+"@typescript-eslint/visitor-keys@5.27.1":
+  version "5.27.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.1.tgz#05a62666f2a89769dac2e6baa48f74e8472983af"
+  integrity sha512-xYs6ffo01nhdJgPieyk7HAOpjhTsx7r/oB9LWEhwAXgwn33tkr+W8DI2ChboqhZlC4q3TC6geDYPoiX8ROqyOQ==
   dependencies:
-    "@typescript-eslint/types" "5.27.0"
+    "@typescript-eslint/types" "5.27.1"
     eslint-visitor-keys "^3.3.0"
 
 acorn-jsx@^5.3.2:
@@ -468,9 +468,9 @@ callsites@^3.0.0:
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 caniuse-lite@^1.0.30001332:
-  version "1.0.30001344"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz#8a1e7fdc4db9c2ec79a05e9fd68eb93a761888bb"
-  integrity sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==
+  version "1.0.30001349"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001349.tgz#90740086a2eb2e825084944169d313c9793aeba4"
+  integrity sha512-VFaWW3jeo6DLU5rwdiasosxhYSduJgSGil4cSyX3/85fbctlE58pXAkWyuRmVA0r2RxsOSVYUTZcySJ8WpbTxw==
 
 chalk@^4.0.0:
   version "4.1.2"
@@ -1181,9 +1181,9 @@ i18next-fs-backend@^1.1.4:
   integrity sha512-/MfAGMP0jHonV966uFf9PkWWuDjPYLIcsipnSO3NxpNtAgRUKLTwvm85fEmsF6hGeu0zbZiCQ3W74jwO6K9uXA==
 
 i18next@^21.6.14:
-  version "21.8.5"
-  resolved "https://registry.npmjs.org/i18next/-/i18next-21.8.5.tgz#b7615f107d9a1492c771dc0e0b8742a80c1d9bec"
-  integrity sha512-uI5LVG10SBHLVOclr6yY1aCimmrzeZ0dwD73Sio61E8gQEwRmKI7/M8RKM084mNNy7VscKtxzSwELrso8BKv1g==
+  version "21.8.8"
+  resolved "https://registry.npmjs.org/i18next/-/i18next-21.8.8.tgz#725a05f2529689d059bce17221cf86fcdccf7665"
+  integrity sha512-iN/5JuWStyivyBgmUgy5BRiFs0lZrgCRaeV9q4yVH/eR9NID7pZSMt3rpF8C16GplchoEjDP0JalKwZMJ1CJAA==
   dependencies:
     "@babel/runtime" "^7.17.2"
 
@@ -1980,9 +1980,9 @@ react-dom@18.1.0:
     scheduler "^0.22.0"
 
 react-i18next@^11.16.2:
-  version "11.16.9"
-  resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-11.16.9.tgz#890cdac0c49120e075d6c520b43dbad3f91bd2df"
-  integrity sha512-euXxWvcEAvsY7ZVkwx9ztCq4butqtsGHEkpkuo0RMj8Ru09IF9o2KxCyN+zyv51Nr0aBh/elaTIiR6fMb8YfVg==
+  version "11.17.0"
+  resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-11.17.0.tgz#44a0689dac7903352733e40303b743fa465eb797"
+  integrity sha512-ewq2S4bVUTRqOMAdM/XvzCn9xUPIryzeBQRghmJ8lC6VI/8Kp7z1GwoLyt8j7GB2ywhN2SjPk7LU4sHzVeu7aw==
   dependencies:
     "@babel/runtime" "^7.14.5"
     html-escaper "^2.0.2"