diff --git a/scripts/travis/build.sh b/scripts/travis/build.sh
index 4506b75d..d78c0c83 100644
--- a/scripts/travis/build.sh
+++ b/scripts/travis/build.sh
@@ -188,7 +188,6 @@ function execute_build_debug() {
 }
 
 chmod +x ./scripts/build.sh
-chmod +x ./scripts/web_package.sh
 if [[ ${build_release} ]]; then
     execute_build_release
 fi
diff --git a/shared/html/templates.html b/shared/html/templates.html
index 68ab5418..80d243c0 100644
--- a/shared/html/templates.html
+++ b/shared/html/templates.html
@@ -5,29 +5,6 @@
         <title>TeaSpeak-Web client templates</title>
     </head>
     <body>
-        <script class="jsrender-template" id="tmpl_main" type="text/html">
-            <div class="overlay-image-preview hidden" id="overlay-image-preview">
-                <div class="container-menu-bar">
-                    <div class="entry button-open-in-window">
-                        <div class="container-icon">
-                            <img src="img/icon_image_preview_browse.svg">
-                        </div>
-                    </div>
-                    <!-- Why would you like to download images?
-                    <div class="entry button-download">
-                        <div class="icon_em client-download"></div>
-                    </div>
-                    -->
-                    <div class="entry button-close">
-                        <div class="icon_em client-close_button"></div>
-                    </div>
-                </div>
-                <div class="container-image">
-                    <img src=""  alt="image"/>
-                </div>
-            </div>
-        </script>
-
         <div class="template-group-modals">
             <script class="jsrender-template" id="tmpl_modal" type="text/html">
                 <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
diff --git a/shared/img/client-icons/image_preview_browse.svg b/shared/img/client-icons/image_preview_browse.svg
new file mode 100644
index 00000000..30143f8e
--- /dev/null
+++ b/shared/img/client-icons/image_preview_browse.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" enable-background="new 0 0 512.418 512.418" fill="#7289da" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <path d="m13.667 2.3463c-3.1281-3.1282-8.1918-3.1287-11.32 0-3.1282 3.1282-3.1287 8.1918 0 11.32 3.1281 3.1282 8.1917 3.1286 11.32 0 3.1282-3.1282 3.1287-8.1918 0-11.32zm-.33456 10.179c-.374-.33444-.77407-.6304-1.1958-.88547.27872-.96278.44384-2.0222.48287-3.1236h2.3534c-.10641 1.4845-.67678 2.877-1.6405 4.009zm-12.292-4.009h2.3534c.039 1.1013.20416 2.1608.48288 3.1236-.42169.25507-.82175.55103-1.1958.88547-.96375-1.132-1.5341-2.5246-1.6405-4.009zm1.6406-5.0293c.374.33444.77406.63041 1.1958.88547-.27872.96279-.44384 2.0223-.48288 3.1236h-2.3534c.10643-1.4844.67678-2.877 1.6406-4.009zm4.8155.99091c-.83193-.0595-1.6341-.26441-2.3778-.60244.4325-1.1137 1.2298-2.4495 2.3778-2.7805zm0 1.0221v1.996h-3.082c.0353-.93163.16731-1.8262.38684-2.6448.8451.36944 1.754.59006 2.6952.64872zm0 3.0162v1.996c-.94122.0587-1.8501.27928-2.6952.64872-.21953-.81853-.35153-1.7131-.38684-2.6448zm0 3.0182v3.3829c-1.1479-.33103-1.9452-1.6667-2.3778-2.7805.74366-.33803 1.5458-.54293 2.3778-.60243zm1.0202 0c.83194.0595 1.6341.2644 2.3777.60243-.43253 1.1138-1.2298 2.4495-2.3777 2.7805zm0-1.0221v-1.996h3.082c-.0353.93162-.16732 1.8262-.38685 2.6448-.84509-.36944-1.754-.59006-2.6952-.64872zm0-3.0162v-1.996c.94122-.0587 1.8501-.27928 2.6952-.64872.21953.81853.35153 1.7131.38685 2.6448zm0-3.0182v-3.3829c1.1479.33103 1.9452 1.6668 2.3777 2.7805-.74365.338-1.5458.54291-2.3777.60241zm2.2912-2.8737c.65297.28594 1.2622.67366 1.8083 1.1547-.25994.22919-.53422.437-.82063.62285-.25434-.62975-.57925-1.2418-.98763-1.7776zm-6.5903 1.7776c-.28641-.18585-.56066-.39366-.82063-.62285.54609-.48106 1.1553-.86878 1.8082-1.1547-.40837.53588-.73328 1.1479-.98762 1.7776zm3e-5 9.2487c.25431.62972.57928 1.2418.98762 1.7776-.65297-.28593-1.2622-.67365-1.8082-1.1547.25994-.22919.53422-.43701.82063-.62285zm7.5779 0c.28641.18584.56069.39366.82063.62281-.5461.48107-1.1553.86879-1.8083 1.1547.40835-.53575.73329-1.1478.98763-1.7775zm.82381-5.1344c-.039-1.1013-.20415-2.1608-.48287-3.1236.42169-.25507.82172-.55104 1.1958-.88547.96375 1.132 1.5341 2.5246 1.6405 4.009z" style="stroke-width:.03125"/>
+</svg>
diff --git a/shared/img/icon_image_preview_browse.svg b/shared/img/icon_image_preview_browse.svg
deleted file mode 100644
index a5381035..00000000
--- a/shared/img/icon_image_preview_browse.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" fill="#7289da" enable-background="new 0 0 512.418 512.418" height="512" viewBox="0 0 512.418 512.418" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m437.335 75.082c-100.1-100.102-262.136-100.118-362.252 0-100.103 100.102-100.118 262.136 0 362.253 100.1 100.102 262.136 100.117 362.252 0 100.103-100.102 100.117-262.136 0-362.253zm-10.706 325.739c-11.968-10.702-24.77-20.173-38.264-28.335 8.919-30.809 14.203-64.712 15.452-99.954h75.309c-3.405 47.503-21.657 92.064-52.497 128.289zm-393.338-128.289h75.309c1.249 35.242 6.533 69.145 15.452 99.954-13.494 8.162-26.296 17.633-38.264 28.335-30.84-36.225-49.091-80.786-52.497-128.289zm52.498-160.936c11.968 10.702 24.77 20.173 38.264 28.335-8.919 30.809-14.203 64.712-15.452 99.954h-75.31c3.406-47.502 21.657-92.063 52.498-128.289zm154.097 31.709c-26.622-1.904-52.291-8.461-76.088-19.278 13.84-35.639 39.354-78.384 76.088-88.977zm0 32.708v63.873h-98.625c1.13-29.812 5.354-58.439 12.379-84.632 27.043 11.822 56.127 18.882 86.246 20.759zm0 96.519v63.873c-30.119 1.877-59.203 8.937-86.246 20.759-7.025-26.193-11.249-54.82-12.379-84.632zm0 96.581v108.254c-36.732-10.593-62.246-53.333-76.088-88.976 23.797-10.817 49.466-17.374 76.088-19.278zm32.646 0c26.622 1.904 52.291 8.461 76.088 19.278-13.841 35.64-39.354 78.383-76.088 88.976zm0-32.708v-63.873h98.625c-1.13 29.812-5.354 58.439-12.379 84.632-27.043-11.822-56.127-18.882-86.246-20.759zm0-96.519v-63.873c30.119-1.877 59.203-8.937 86.246-20.759 7.025 26.193 11.249 54.82 12.379 84.632zm0-96.581v-108.254c36.734 10.593 62.248 53.338 76.088 88.977-23.797 10.816-49.466 17.373-76.088 19.277zm73.32-91.957c20.895 9.15 40.389 21.557 57.864 36.951-8.318 7.334-17.095 13.984-26.26 19.931-8.139-20.152-18.536-39.736-31.604-56.882zm-210.891 56.882c-9.165-5.947-17.941-12.597-26.26-19.931 17.475-15.394 36.969-27.801 57.864-36.951-13.068 17.148-23.465 36.732-31.604 56.882zm.001 295.958c8.138 20.151 18.537 39.736 31.604 56.882-20.895-9.15-40.389-21.557-57.864-36.951 8.318-7.334 17.095-13.984 26.26-19.931zm242.494 0c9.165 5.947 17.942 12.597 26.26 19.93-17.475 15.394-36.969 27.801-57.864 36.951 13.067-17.144 23.465-36.729 31.604-56.881zm26.362-164.302c-1.249-35.242-6.533-69.146-15.452-99.954 13.494-8.162 26.295-17.633 38.264-28.335 30.84 36.225 49.091 80.786 52.497 128.289z"/></svg>
\ No newline at end of file
diff --git a/shared/js/main.tsx b/shared/js/main.tsx
index afbf6984..6a6e7af8 100644
--- a/shared/js/main.tsx
+++ b/shared/js/main.tsx
@@ -53,8 +53,6 @@ import {clientServiceInvite} from "tc-shared/clientservice";
 import {ActionResult} from "tc-services";
 import {CommandResult} from "tc-shared/connection/ServerConnectionDeclaration";
 import {ErrorCode} from "tc-shared/connection/ErrorCode";
-
-import "./Bookmarks";
 import {bookmarks} from "tc-shared/Bookmarks";
 
 assertMainApplication();
@@ -568,19 +566,4 @@ loader.register_task(loader.Stage.LOADED, {
         bookmarks.executeAutoConnect();
     },
     name: tr("bookmark auto connect")
-});
-
-/* TODO: Remove this after the image preview has been rewritten into react */
-loader.register_task(Stage.JAVASCRIPT_INITIALIZING,{
-    name: "app init",
-    function: async () => {
-        try {
-            $("body").append($("#tmpl_main").renderTag());
-        } catch(error) {
-            logError(LogCategory.GENERAL, error);
-            loader.critical_error(tr("Failed to setup main page!"));
-            return;
-        }
-    },
-    priority: 100
 });
\ No newline at end of file
diff --git a/shared/js/text/bbcode/image.tsx b/shared/js/text/bbcode/image.tsx
index a771d64a..bfb12332 100644
--- a/shared/js/text/bbcode/image.tsx
+++ b/shared/js/text/bbcode/image.tsx
@@ -5,7 +5,7 @@ import * as loader from "tc-loader";
 import {rendererReact, rendererText} from "tc-shared/text/bbcode/renderer";
 import * as contextmenu from "tc-shared/ui/elements/ContextMenu";
 import {copyToClipboard} from "tc-shared/utils/helpers";
-import * as image_preview from "tc-shared/ui/frames/image_preview";
+import * as image_preview from "tc-shared/ui/frames/ImagePreview";
 
 export const regexImage = /^(?:https?):(?:\/{1,3}|\\)[-a-zA-Z0-9:;,@#%&()~_?+=\/\\.]*$/g;
 
@@ -49,7 +49,7 @@ function loadImageForElement(element: HTMLImageElement) {
             icon_class: "client-copy"
         })
     });
-    parent.css("cursor", "pointer").on('click', () => image_preview.preview_image(proxiedURL, url));
+    parent.css("cursor", "pointer").on('click', () => image_preview.showImagePreview(proxiedURL, url));
 }
 
 loader.register_task(loader.Stage.JAVASCRIPT_INITIALIZING, {
diff --git a/shared/js/ui/AppRenderer.scss b/shared/js/ui/AppRenderer.scss
index d83faa45..f7ca0263 100644
--- a/shared/js/ui/AppRenderer.scss
+++ b/shared/js/ui/AppRenderer.scss
@@ -11,72 +11,72 @@
     width: 100%;
 
     padding: 5px;
+}
 
-    /* TODO: Move this into the control bar? */
-    .controlBar {
-        z-index: 200;
+/* TODO: Move this into the control bar? */
+.controlBar {
+    z-index: 200;
 
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
 
-        flex-shrink: 0;
-        flex-grow: 0;
+    flex-shrink: 0;
+    flex-grow: 0;
 
-        border-radius: 5px;
+    border-radius: 5px;
 
-        height: 2em;
-        width: 100%;
-    }
+    height: 2em;
+    width: 100%;
+}
 
-    .mainContainer {
-        display: flex;
-        flex-direction: column;
-        justify-content: stretch;
+.mainContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
 
-        position: relative;
+    position: relative;
 
-        flex-shrink: 1;
+    flex-shrink: 1;
 
-        height: 100%;
-        min-height: 400px;
+    height: 100%;
+    min-height: 400px;
 
-        margin-top: 5px;
-    }
+    margin-top: 5px;
+}
 
-    .channelTreeAndSidebar {
-        display: flex;
-        flex-direction: row;
-        justify-content: stretch;
+.channelTreeAndSidebar {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
 
-        min-height: 27em;
-    }
+    min-height: 27em;
+}
 
-    .channelTree {
-        display: flex;
-        flex-direction: column;
-        justify-content: stretch;
+.channelTree {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
 
-        background: var(--channel-tree-background);
-        min-width: 200px;
-        min-height: 100px;
+    background: var(--channel-tree-background);
+    min-width: 200px;
+    min-height: 100px;
 
-        overflow: hidden;
-        border-radius: 5px;
-    }
+    overflow: hidden;
+    border-radius: 5px;
+}
 
-    .sideBar {
-        min-width: 350px;
-    }
+.sideBar {
+    min-width: 350px;
+}
 
-    .containerLog {
-        display: flex;
-        flex-direction: row;
-        justify-content: stretch;
+.containerLog {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
 
-        flex-shrink: 1;
-        flex-grow: 1;
+    flex-shrink: 1;
+    flex-grow: 1;
 
-        min-height: 0;
-    }
+    min-height: 0;
 }
\ No newline at end of file
diff --git a/shared/js/ui/AppRenderer.tsx b/shared/js/ui/AppRenderer.tsx
index 6ca22a60..5402f553 100644
--- a/shared/js/ui/AppRenderer.tsx
+++ b/shared/js/ui/AppRenderer.tsx
@@ -18,6 +18,7 @@ import {HostBannerUiEvents} from "tc-shared/ui/frames/HostBannerDefinitions";
 import {AppUiEvents} from "tc-shared/ui/AppDefinitions";
 import {ChannelTreeRenderer} from "tc-shared/ui/tree/Renderer";
 import {ChannelTreeUIEvents} from "tc-shared/ui/tree/Definitions";
+import {ImagePreviewHook} from "tc-shared/ui/frames/ImagePreview";
 
 const cssStyle = require("./AppRenderer.scss");
 const VideoFrame = React.memo((props: { events: Registry<AppUiEvents> }) => {
@@ -100,8 +101,10 @@ export const TeaAppMainView = (props: {
                 </ErrorBoundary>
             </div>
             <FooterRenderer />
+
+            <ErrorBoundary>
+                <ImagePreviewHook />
+            </ErrorBoundary>
         </div>
     );
-}
-
-/* ConnectionHandlerList  */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/shared/js/ui/frames/ImagePreview.scss b/shared/js/ui/frames/ImagePreview.scss
new file mode 100644
index 00000000..8ddb6c08
--- /dev/null
+++ b/shared/js/ui/frames/ImagePreview.scss
@@ -0,0 +1,89 @@
+@import "../../../css/static/properties";
+@import "../../../css/static/mixin";
+
+.overlay {
+    position: absolute;
+    z-index: 1000;
+
+    pointer-events: all;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    opacity: 1;
+    background-color: #000000EF;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &.hidden {
+        pointer-events: none;
+        opacity: 0;
+    }
+
+    @include transition(ease-in-out .25s);
+}
+
+.containerMenuBar {
+    position: absolute;
+
+    top: .25em;
+    left: 0;
+    right: .25em;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    .entry {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 2em;
+
+        margin: .25em;
+        padding: .15em;
+
+        border-radius: .125em;
+
+        cursor: pointer;
+
+        .containerIcon {
+            width: 1em;
+            height: 1em;
+            display: flex;
+
+            img {
+                height: 100%;
+                width: 100%;
+            }
+        }
+
+        &:hover {
+            background-color: #FFFFFF1F;
+        }
+    }
+}
+
+.containerImage {
+    max-width: 90%;
+    max-height: 90%;
+    align-self: center;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+
+    img {
+        flex-shrink: 1;
+
+        min-height: 1em;
+        min-width: 1em;
+
+        max-height: 100%;
+        max-width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/shared/js/ui/frames/ImagePreview.tsx b/shared/js/ui/frames/ImagePreview.tsx
new file mode 100644
index 00000000..d20f1396
--- /dev/null
+++ b/shared/js/ui/frames/ImagePreview.tsx
@@ -0,0 +1,79 @@
+import * as loader from "tc-loader";
+import React from "react";
+import {joinClassList} from "tc-shared/ui/react-elements/Helper";
+import {ClientIconRenderer} from "tc-shared/ui/react-elements/Icons";
+import {ClientIcon} from "svg-sprites/client-icons";
+import ReactDOM from "react-dom";
+
+const cssStyle = require("./ImagePreview.scss");
+
+const imagePreviewInstance = React.createRef<ImagePreview>();
+class ImagePreview extends React.PureComponent<{}, {
+    imageUrl: string | undefined,
+    targetUrl: string | undefined
+}> {
+    constructor(props) {
+        super(props);
+
+        this.state = { targetUrl: undefined, imageUrl: undefined };
+    }
+
+    render() {
+        return (
+            <div
+                className={joinClassList(cssStyle.overlay, (!this.state.imageUrl ? cssStyle.hidden : undefined))}
+                onClick={event => {
+                    if(event.isDefaultPrevented()) {
+                        return;
+                    }
+
+                    this.closePreview()
+                }}
+            >
+                <div className={cssStyle.containerMenuBar}>
+                    <div
+                        className={cssStyle.entry}
+                        onClick={() => {
+                            const win = window.open(this.state.targetUrl, '_blank');
+                            win.focus();
+                        }}
+                    >
+                        <ClientIconRenderer icon={ClientIcon.ImagePreviewBrowse} />
+                    </div>
+                    <div
+                        className={cssStyle.entry}
+                         onClick={() => this.closePreview()}
+                    >
+                        <ClientIconRenderer icon={ClientIcon.CloseButton} />
+                    </div>
+                </div>
+                <div className={cssStyle.containerImage}>
+                    <img src={this.state.imageUrl} title={this.state.targetUrl} alt={null} />
+                </div>
+            </div>
+        )
+    }
+
+    closePreview() {
+        this.setState({ imageUrl: undefined, targetUrl: undefined });
+    }
+}
+
+export const ImagePreviewHook = React.memo(() => {
+    return <ImagePreview ref={imagePreviewInstance} />;
+})
+
+export function showImagePreview(url: string, originalUrl: string) {
+    imagePreviewInstance.current?.setState({
+        imageUrl: url,
+        targetUrl: originalUrl
+    });
+}
+
+export function isImagePreviewAvailable() {
+    return !!imagePreviewInstance.current;
+}
+
+export function closeImagePreview() {
+    imagePreviewInstance.current?.closePreview();
+}
\ No newline at end of file
diff --git a/shared/js/ui/frames/image_preview.ts b/shared/js/ui/frames/image_preview.ts
deleted file mode 100644
index 0ebd02b3..00000000
--- a/shared/js/ui/frames/image_preview.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import * as loader from "tc-loader";
-
-let preview_overlay: JQuery<HTMLDivElement>;
-let container_image: JQuery<HTMLDivElement>;
-let button_open_in_browser: JQuery;
-
-export function preview_image(url: string, original_url: string) {
-    if(!preview_overlay) return;
-
-    container_image.empty();
-    $.spawn("img").attr({
-            "src": url,
-            "title": original_url,
-            "x-original-src": original_url
-    }).appendTo(container_image);
-
-    preview_overlay.removeClass("hidden");
-    button_open_in_browser.show();
-}
-
-export function preview_image_tag(tag: JQuery) {
-    if(!preview_overlay) return;
-
-    container_image.empty();
-    container_image.append(tag);
-
-    preview_overlay.removeClass("hidden");
-    button_open_in_browser.hide();
-}
-
-export function current_url() {
-    const image_tag = container_image.find("img");
-    return image_tag.attr("x-original-src") || image_tag.attr("src") || "";
-}
-
-export function close_preview() {
-    preview_overlay.addClass("hidden");
-}
-
-loader.register_task(loader.Stage.LOADED, {
-    priority: 0,
-    name: "image preview init",
-    function: async () => {
-        preview_overlay = $("#overlay-image-preview");
-        container_image = preview_overlay.find(".container-image") as any;
-
-        preview_overlay.find("img").on('click', event => event.preventDefault());
-        preview_overlay.on('click', event => {
-            if(event.isDefaultPrevented()) return;
-            close_preview();
-        });
-
-        preview_overlay.find(".button-close").on('click', event => {
-            event.preventDefault();
-            close_preview();
-        });
-
-        preview_overlay.find(".button-download").on('click', event => {
-            event.preventDefault();
-
-            const link = document.createElement('a');
-            link.href = current_url();
-            link.target = "_blank";
-
-            const findex = link.href.lastIndexOf("/") + 1;
-            link.download = link.href.substr(findex);
-
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        });
-
-        button_open_in_browser = preview_overlay.find(".button-open-in-window");
-        button_open_in_browser.on('click', event => {
-            event.preventDefault();
-
-            const win = window.open(current_url(), '_blank');
-            win.focus();
-        });
-    }
-});
\ No newline at end of file
diff --git a/shared/js/ui/frames/side/MusicBotRenderer.tsx b/shared/js/ui/frames/side/MusicBotRenderer.tsx
index 5bcc0cf2..eb6a1255 100644
--- a/shared/js/ui/frames/side/MusicBotRenderer.tsx
+++ b/shared/js/ui/frames/side/MusicBotRenderer.tsx
@@ -10,7 +10,7 @@ import {
     MusicBotUiEvents
 } from "tc-shared/ui/frames/side/MusicBotDefinitions";
 import {Translatable} from "tc-shared/ui/react-elements/i18n";
-import {preview_image} from "tc-shared/ui/frames/image_preview";
+import {showImagePreview} from "tc-shared/ui/frames/ImagePreview";
 import {Slider} from "tc-shared/ui/react-elements/Slider";
 
 const cssStyle = require("./MusicBotRenderer.scss");
@@ -144,7 +144,7 @@ const Thumbnail = React.memo(() => {
                         draggable={false}
                         key={"song-thumbnail"}
                         src={info.thumbnail}
-                        onClick={() => preview_image(info.thumbnail, info.thumbnail)}
+                        onClick={() => showImagePreview(info.thumbnail, info.thumbnail)}
                         alt={tr("Thumbnail")}
                         style={{ cursor: "pointer" }}
                     />
diff --git a/shared/js/ui/frames/side/MusicPlaylistRenderer.tsx b/shared/js/ui/frames/side/MusicPlaylistRenderer.tsx
index acfb2907..b4486ae2 100644
--- a/shared/js/ui/frames/side/MusicPlaylistRenderer.tsx
+++ b/shared/js/ui/frames/side/MusicPlaylistRenderer.tsx
@@ -9,7 +9,7 @@ import {
 import {Button} from "tc-shared/ui/react-elements/Button";
 import {Translatable} from "tc-shared/ui/react-elements/i18n";
 import {LoadingDots} from "tc-shared/ui/react-elements/LoadingDots";
-import {preview_image} from "tc-shared/ui/frames/image_preview";
+import {showImagePreview} from "tc-shared/ui/frames/ImagePreview";
 import {joinClassList, useTr} from "tc-shared/ui/react-elements/Helper";
 import {spawnContextMenu} from "tc-shared/ui/ContextMenu";
 import {copyToClipboard} from "tc-shared/utils/helpers";
@@ -87,7 +87,7 @@ const PlaylistEntry = React.memo((props: { serverUniqueId: string, playlistId: n
                         draggable={false}
                         key={"song-thumbnail"}
                         src={status.thumbnailImage}
-                        onClick={() => preview_image(status.thumbnailImage, status.thumbnailImage)}
+                        onClick={() => showImagePreview(status.thumbnailImage, status.thumbnailImage)}
                         alt={useTr("Thumbnail")}
                     />
                 )
diff --git a/shared/js/ui/react-elements/Avatar.tsx b/shared/js/ui/react-elements/Avatar.tsx
index 4e76f70b..bdae2aaf 100644
--- a/shared/js/ui/react-elements/Avatar.tsx
+++ b/shared/js/ui/react-elements/Avatar.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import {useEffect, useState} from "react";
 import {ClientAvatar, kDefaultAvatarImage, kLoadingAvatarImage} from "tc-shared/file/Avatars";
-import * as image_preview from "tc-shared/ui/frames/image_preview";
+import * as image_preview from "tc-shared/ui/frames/ImagePreview";
 
 const ImageStyle = { height: "100%", width: "100%", cursor: "pointer" };
 export const AvatarRenderer = React.memo((props: { avatar: ClientAvatar | "loading" | "default", className?: string, alt?: string }) => {
@@ -28,7 +28,7 @@ export const AvatarRenderer = React.memo((props: { avatar: ClientAvatar | "loadi
                             return;
 
                         event.preventDefault();
-                        image_preview.preview_image(imageUrl, undefined);
+                        image_preview.showImagePreview(imageUrl, undefined);
                     }}
                     draggable={false}
                 />;
@@ -46,7 +46,7 @@ export const AvatarRenderer = React.memo((props: { avatar: ClientAvatar | "loadi
                             return;
 
                         event.preventDefault();
-                        image_preview.preview_image(imageUrl, undefined);
+                        image_preview.showImagePreview(imageUrl, undefined);
                     }}
                     draggable={false}
                 />;
diff --git a/shared/svg-sprites/client-icons.d.ts b/shared/svg-sprites/client-icons.d.ts
index 322b71f4..6be410ed 100644
--- a/shared/svg-sprites/client-icons.d.ts
+++ b/shared/svg-sprites/client-icons.d.ts
@@ -3,9 +3,9 @@
  *
  * This file has been auto generated by the svg-sprite generator.
  * Sprite source directory: G:\TeaSpeak\web\shared\img\client-icons
- * Sprite count: 209
+ * Sprite count: 210
  */
-export type ClientIconClass = "client-about" | "client-activate_microphone" | "client-add" | "client-add_foe" | "client-add_folder" | "client-add_friend" | "client-addon-collection" | "client-addon" | "client-apply" | "client-arrow_down" | "client-arrow_left" | "client-arrow_right" | "client-arrow_up" | "client-away" | "client-ban_client" | "client-ban_list" | "client-bookmark_add" | "client-bookmark_add_folder" | "client-bookmark_duplicate" | "client-bookmark_edit_name" | "client-bookmark_manager" | "client-bookmark_remove" | "client-broken_image" | "client-browse-addon-online" | "client-capture" | "client-change_nickname" | "client-changelog" | "client-channel_chat" | "client-channel_collapse_all" | "client-channel_commander" | "client-channel_create" | "client-channel_create_sub" | "client-channel_default" | "client-channel_delete" | "client-channel_edit" | "client-channel_expand_all" | "client-channel_green" | "client-channel_green_subscribed" | "client-channel_green_subscribed2" | "client-channel_popin" | "client-channel_popout" | "client-channel_private" | "client-channel_red" | "client-channel_red_subscribed" | "client-channel_switch" | "client-channel_unsubscribed" | "client-channel_yellow" | "client-channel_yellow_subscribed" | "client-check_update" | "client-close_button" | "client-complaint_list" | "client-conflict-icon" | "client-connect" | "client-contact" | "client-copy" | "client-copy_url" | "client-d_sound" | "client-d_sound_me" | "client-d_sound_user" | "client-default" | "client-default_for_all_bookmarks" | "client-delete" | "client-delete_avatar" | "client-disconnect" | "client-double_arrow" | "client-down" | "client-download" | "client-edit" | "client-edit_friend_foe_status" | "client-emoticon" | "client-error" | "client-file_home" | "client-file_refresh" | "client-filetransfer" | "client-find" | "client-folder" | "client-folder_up" | "client-fullscreen" | "client-group_100" | "client-group_200" | "client-group_300" | "client-group_500" | "client-group_600" | "client-guisetup" | "client-hardware_input_muted" | "client-hardware_output_muted" | "client-home" | "client-hoster_button" | "client-hotkeys" | "client-icon-pack" | "client-iconsview" | "client-iconviewer" | "client-identity_default" | "client-identity_export" | "client-identity_import" | "client-identity_manager" | "client-info" | "client-input_muted" | "client-input_muted_local" | "client-invite_buddy" | "client-is_talker" | "client-kick_channel" | "client-kick_server" | "client-listview" | "client-loading_image" | "client-message_incoming" | "client-message_info" | "client-message_outgoing" | "client-messages" | "client-microphone_broken" | "client-minimize_button" | "client-moderated" | "client-move_client_to_own_channel" | "client-music" | "client-new_chat" | "client-notifications" | "client-offline_messages" | "client-on_whisperlist" | "client-output_muted" | "client-permission_channel" | "client-permission_client" | "client-permission_overview" | "client-permission_server_groups" | "client-phoneticsnickname" | "client-ping_1" | "client-ping_2" | "client-ping_3" | "client-ping_4" | "client-ping_calculating" | "client-ping_disconnected" | "client-play" | "client-player_chat" | "client-player_commander_off" | "client-player_commander_on" | "client-player_off" | "client-player_on" | "client-player_whisper" | "client-plugins" | "client-poke" | "client-present" | "client-recording_start" | "client-recording_stop" | "client-refresh" | "client-register" | "client-reload" | "client-remove_foe" | "client-remove_friend" | "client-security" | "client-selectfolder" | "client-send_complaint" | "client-server_green" | "client-server_log" | "client-server_query" | "client-settings" | "client-share_screen" | "client-simple_arrow" | "client-sort_by_name" | "client-sound-pack" | "client-soundpack" | "client-stop" | "client-subscribe_mode" | "client-subscribe_to_all_channels" | "client-subscribe_to_channel" | "client-subscribe_to_channel_family" | "client-switch_advanced" | "client-switch_standard" | "client-sync-disable" | "client-sync-enable" | "client-sync-icon" | "client-tab_close_button" | "client-talk_power_grant" | "client-talk_power_grant_next" | "client-talk_power_request" | "client-talk_power_request_cancel" | "client-talk_power_revoke" | "client-talk_power_revoke_all_grant_next" | "client-teaspeak_logo" | "client-temp_server_password" | "client-temp_server_password_add" | "client-textformat" | "client-textformat_bold" | "client-textformat_foreground" | "client-textformat_italic" | "client-textformat_underline" | "client-theme" | "client-toggle_server_query_clients" | "client-toggle_whisper" | "client-token" | "client-token_use" | "client-translation" | "client-unsubscribe_from_all_channels" | "client-unsubscribe_from_channel_family" | "client-unsubscribe_mode" | "client-up" | "client-upload" | "client-upload_avatar" | "client-urlcatcher" | "client-user-account" | "client-video_muted" | "client-virtualserver_edit" | "client-volume" | "client-w2g" | "client-warning" | "client-warning_external_link" | "client-warning_info" | "client-warning_question" | "client-weblist" | "client-whisper" | "client-whisperlists";
+export type ClientIconClass = "client-about" | "client-activate_microphone" | "client-add" | "client-add_foe" | "client-add_folder" | "client-add_friend" | "client-addon-collection" | "client-addon" | "client-apply" | "client-arrow_down" | "client-arrow_left" | "client-arrow_right" | "client-arrow_up" | "client-away" | "client-ban_client" | "client-ban_list" | "client-bookmark_add" | "client-bookmark_add_folder" | "client-bookmark_duplicate" | "client-bookmark_edit_name" | "client-bookmark_manager" | "client-bookmark_remove" | "client-broken_image" | "client-browse-addon-online" | "client-capture" | "client-change_nickname" | "client-changelog" | "client-channel_chat" | "client-channel_collapse_all" | "client-channel_commander" | "client-channel_create" | "client-channel_create_sub" | "client-channel_default" | "client-channel_delete" | "client-channel_edit" | "client-channel_expand_all" | "client-channel_green" | "client-channel_green_subscribed" | "client-channel_green_subscribed2" | "client-channel_popin" | "client-channel_popout" | "client-channel_private" | "client-channel_red" | "client-channel_red_subscribed" | "client-channel_switch" | "client-channel_unsubscribed" | "client-channel_yellow" | "client-channel_yellow_subscribed" | "client-check_update" | "client-close_button" | "client-complaint_list" | "client-conflict-icon" | "client-connect" | "client-contact" | "client-copy" | "client-copy_url" | "client-d_sound" | "client-d_sound_me" | "client-d_sound_user" | "client-default" | "client-default_for_all_bookmarks" | "client-delete" | "client-delete_avatar" | "client-disconnect" | "client-double_arrow" | "client-down" | "client-download" | "client-edit" | "client-edit_friend_foe_status" | "client-emoticon" | "client-error" | "client-file_home" | "client-file_refresh" | "client-filetransfer" | "client-find" | "client-folder" | "client-folder_up" | "client-fullscreen" | "client-group_100" | "client-group_200" | "client-group_300" | "client-group_500" | "client-group_600" | "client-guisetup" | "client-hardware_input_muted" | "client-hardware_output_muted" | "client-home" | "client-hoster_button" | "client-hotkeys" | "client-icon-pack" | "client-iconsview" | "client-iconviewer" | "client-identity_default" | "client-identity_export" | "client-identity_import" | "client-identity_manager" | "client-image_preview_browse" | "client-info" | "client-input_muted" | "client-input_muted_local" | "client-invite_buddy" | "client-is_talker" | "client-kick_channel" | "client-kick_server" | "client-listview" | "client-loading_image" | "client-message_incoming" | "client-message_info" | "client-message_outgoing" | "client-messages" | "client-microphone_broken" | "client-minimize_button" | "client-moderated" | "client-move_client_to_own_channel" | "client-music" | "client-new_chat" | "client-notifications" | "client-offline_messages" | "client-on_whisperlist" | "client-output_muted" | "client-permission_channel" | "client-permission_client" | "client-permission_overview" | "client-permission_server_groups" | "client-phoneticsnickname" | "client-ping_1" | "client-ping_2" | "client-ping_3" | "client-ping_4" | "client-ping_calculating" | "client-ping_disconnected" | "client-play" | "client-player_chat" | "client-player_commander_off" | "client-player_commander_on" | "client-player_off" | "client-player_on" | "client-player_whisper" | "client-plugins" | "client-poke" | "client-present" | "client-recording_start" | "client-recording_stop" | "client-refresh" | "client-register" | "client-reload" | "client-remove_foe" | "client-remove_friend" | "client-security" | "client-selectfolder" | "client-send_complaint" | "client-server_green" | "client-server_log" | "client-server_query" | "client-settings" | "client-share_screen" | "client-simple_arrow" | "client-sort_by_name" | "client-sound-pack" | "client-soundpack" | "client-stop" | "client-subscribe_mode" | "client-subscribe_to_all_channels" | "client-subscribe_to_channel" | "client-subscribe_to_channel_family" | "client-switch_advanced" | "client-switch_standard" | "client-sync-disable" | "client-sync-enable" | "client-sync-icon" | "client-tab_close_button" | "client-talk_power_grant" | "client-talk_power_grant_next" | "client-talk_power_request" | "client-talk_power_request_cancel" | "client-talk_power_revoke" | "client-talk_power_revoke_all_grant_next" | "client-teaspeak_logo" | "client-temp_server_password" | "client-temp_server_password_add" | "client-textformat" | "client-textformat_bold" | "client-textformat_foreground" | "client-textformat_italic" | "client-textformat_underline" | "client-theme" | "client-toggle_server_query_clients" | "client-toggle_whisper" | "client-token" | "client-token_use" | "client-translation" | "client-unsubscribe_from_all_channels" | "client-unsubscribe_from_channel_family" | "client-unsubscribe_mode" | "client-up" | "client-upload" | "client-upload_avatar" | "client-urlcatcher" | "client-user-account" | "client-video_muted" | "client-virtualserver_edit" | "client-volume" | "client-w2g" | "client-warning" | "client-warning_external_link" | "client-warning_info" | "client-warning_question" | "client-weblist" | "client-whisper" | "client-whisperlists";
 
 export enum ClientIcon {
   About = "client-about",
@@ -104,6 +104,7 @@ export enum ClientIcon {
   IdentityExport = "client-identity_export",
   IdentityImport = "client-identity_import",
   IdentityManager = "client-identity_manager",
+  ImagePreviewBrowse = "client-image_preview_browse",
   Info = "client-info",
   InputMuted = "client-input_muted",
   InputMutedLocal = "client-input_muted_local",
diff --git a/web/app/ui/menu-bar/Renderer.scss b/web/app/ui/menu-bar/Renderer.scss
index 7fce0a6f..3d2f4ecc 100644
--- a/web/app/ui/menu-bar/Renderer.scss
+++ b/web/app/ui/menu-bar/Renderer.scss
@@ -16,6 +16,7 @@
     z-index: 201;
 
     font-family: Arial, serif;
+    z-index: 10000;
 
     > .containerMenuItem {
         > .menuItem {
