diff --git a/includes/Page/PageDisplayHandler.php b/includes/Page/PageDisplayHandler.php
index 397a42d2..273834e6 100644
--- a/includes/Page/PageDisplayHandler.php
+++ b/includes/Page/PageDisplayHandler.php
@@ -129,10 +129,11 @@ class PageDisplayHandler {
        public function buildPageContainerEnd( Title $pageTitle ) {
                return Html::closeElement( 'div' ) .
                        Html::openElement( 'div', [
-                                       'id' => 'prp-page-image-openseadragon',
                                        'class' => 'prp-page-image'
  ] ) .
-                       $this->buildImageHtml( $pageTitle ) .
+                       $this->buildImageHtml( $pageTitle ) . Html::rawElement( 'div', [
+                               'id' => 'prp-page-image-openseadragon-vertical'
+                       ] ) .
                        Html::closeElement( 'div' ) .
                        Html::closeElement( 'div' );
        }
diff --git a/modules/page/ext.proofreadpage.page.edit.js b/modules/page/ext.proofreadpage.page.edit.js
index 2d125609..61a286db 100644
--- a/modules/page/ext.proofreadpage.page.edit.js
+++ b/modules/page/ext.proofreadpage.page.edit.js
@@ -180,8 +180,7 @@
                isLayoutHorizontal = horizontal === undefined ? !isLayoutHorizontal : horizontal;

                if ( viewer ) {
-                       // eslint-disable-next-line no-jquery/no-global-selector
-                       $( '.openseadragon-container' ).detach();
+                       viewer.destroy();
                        viewer = null;
                }

@@ -190,6 +189,7 @@
                        if ( $imgContHorizontal ) {
                                $imgContHorizontal.css( 'display', 'none' );
                        }
+                       $( '.prp-page-image' ).css('display', 'block');

                        // Switch CSS widths and heights back to the default side-by-size layout.
                        $imgCont.css( {
@@ -200,7 +200,7 @@
                                width: ''
                        } );
                        $.when( mw.loader.using( 'ext.wikiEditor' ), $.ready ).then( function () {
-                               ensureImageZoomInitialization( 'prp-page-image-openseadragon' );
+                               ensureImageZoomInitialization( 'prp-page-image-openseadragon-vertical' );
                        } );

                        // eslint-disable-next-line no-jquery/no-global-selector
@@ -210,8 +210,6 @@
                        if ( !$imgContHorizontal ) {
                                $imgContHorizontal = $imgCont
                                        .clone()
-                                       .addClass( 'prp-page-image-horizontal' )
-                                       .removeClass( 'prp-page-image' )
                                        .attr( 'id', 'prp-page-image-openseadragon-horizontal' );
                                $imgContHorizontal.insertBefore( $editForm );
                        } else {
@@ -219,6 +217,7 @@
                        }

                        $imgCont.css( 'display', 'none' );
+                       $( '.prp-page-image' ).css('display', 'none');

                        // Set the width and height of the image and form.
                        $imgContHorizontal.css( {
@@ -540,11 +539,11 @@

                if ( $imgCont === undefined ) {
                        // eslint-disable-next-line no-jquery/no-global-selector
-                       $imgCont = $( '#prp-page-image-openseadragon' );
+                       $imgCont = $( '#prp-page-image-openseadragon-vertical' );
                }

                if ( $img === undefined ) {
-                       $img = $imgCont.find( 'img' );
+                       $img = $( '.prp-page-image' ).find( 'img' );
-                       $img = $imgCont.find( 'img' );

                if ( $img === undefined ) {
-                       $img = $imgCont.find( 'img' );
+                       $img = $( '.prp-page-image' ).find( 'img' );
                }

                if ( imgHeight === undefined ) {
diff --git a/modules/ve/pageTarget/ve.init.mw.ProofreadPagePageTarget.js b/modules/ve/pageTarget/ve.init.mw.ProofreadPagePageTarget.js
index b027c90f..aebfcf42 100644
--- a/modules/ve/pageTarget/ve.init.mw.ProofreadPagePageTarget.js
+++ b/modules/ve/pageTarget/ve.init.mw.ProofreadPagePageTarget.js
@@ -37,14 +37,18 @@ ve.init.mw.ProofreadPagePageTarget = function VeInitMwProofreadPagePageTarget()

        // eslint-disable-next-line no-jquery/no-global-selector
        this.$imgCont = $( '.prp-page-image' );
-       this.$imgCont.css( 'display', 'initial' );
+       this.$imgCont.css( 'display', 'block' );

-       this.$imgCont.before( this.$imageZoomDiv );
+       // eslint-disable-next-line no-jquery/no-global-selector
+       this.$imgOSDCont = $( '#prp-page-image-openseadragon-vertical' )
+       this.$imgOSDCont.css( 'display', 'initial' );
+
+       this.$imgOSDCont.before( this.$imageZoomDiv );

        this.$img = this.$imgCont.find( 'img' );

-       this.$imgCont.height( this.$imgCont.height() );
-       this.$imgCont.width( this.$imgCont.width() );
+       this.$imgOSDCont.height( this.$imgCont.height() );
+       this.$imgOSDCont.width( this.$imgCont.width() );

        zoomOut = new OO.ui.ButtonWidget( { id: 'prp-page-ve-zoomOut', icon: 'zoomOut', title: ve.msg( 'proofreadpage-button-zoom-out-label' ) } );
        zoomReset = new OO.ui.ButtonWidget( { id: 'prp-page-ve-zoomReset', icon: 'zoomReset', title: ve.msg( 'proofreadpage-button-reset-zoom-label' ) } );
@@ -102,7 +106,7 @@ ve.init.mw.ProofreadPagePageTarget.prototype.afterActivate = function () {
                .removeClass( 've-init-mw-desktopArticleTarget-uneditableContent' )
                .before( this.$zoomButtonsCont );

-       this.$imageZoomDiv.removeClass( 've-init-mw-desktopArticleTarget-uneditableContent' ).append( this.$zoomButtonsCont, this.$imgCont );
+       this.$imageZoomDiv.removeClass( 've-init-mw-desktopArticleTarget-uneditableContent' ).append( this.$zoomButtonsCont, this.$imgOSDCont );

        // eslint-disable-next-line no-jquery/no-global-selector
        $( '.openseadragon-container' ).detach();
@@ -140,7 +144,7 @@ ve.init.mw.ProofreadPagePageTarget.prototype.ensureImageZoomInitialization = fun
        this.$img.hide();

        this.viewer = OpenSeadragon( {
-               id: 'prp-page-image-openseadragon',
+               id: 'prp-page-image-openseadragon-vertical',
                zoomInButton: 'prp-page-ve-zoomIn',
                zoomOutButton: 'prp-page-ve-zoomOut',
                homeButton: 'prp-page-ve-zoomReset',