diff --git a/public/js/pages/WarehouseShippingNote/WarehouseShippingNote.css b/public/js/pages/WarehouseShippingNote/WarehouseShippingNote.css
index 3c020b08c..73d5f00b0 100644
--- a/public/js/pages/WarehouseShippingNote/WarehouseShippingNote.css
+++ b/public/js/pages/WarehouseShippingNote/WarehouseShippingNote.css
@@ -184,3 +184,8 @@ input:checked + .ios-switch-slider:before {
 input:disabled + .ios-switch-slider {
     cursor: not-allowed;
 }
+
+.see-through-test-modal .modal {
+    position: unset !important;
+    background: unset !important;
+}
\ No newline at end of file
diff --git a/public/js/pages/WarehouseShippingNote/WarehouseShippingNote.js b/public/js/pages/WarehouseShippingNote/WarehouseShippingNote.js
index dcdd9fa3e..06a5c1cb9 100644
--- a/public/js/pages/WarehouseShippingNote/WarehouseShippingNote.js
+++ b/public/js/pages/WarehouseShippingNote/WarehouseShippingNote.js
@@ -252,11 +252,124 @@ Vue.component('warehouse-shipping-note-logs', {
     }
 })
 
+Vue.component('warehouse-shipping-note-see-through', {
+    props: ['wantedState'],
+    //language=Vue
+    template: `
+      <div class="modal" style="position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center;">
+        <div class="modal-content" style="background-color: #fff; border-radius: 8px; width: 95%; height: 95%; max-width: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column;">
+          <div class="modal-top-bar" style="background: linear-gradient(135deg, #f7c423, #005384); color: white; padding: 15px 20px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
+            <h2 style="margin: 0; font-family: Arial, sans-serif; font-size: 20px; flex: 1;">Lieferschein Durchschau Modus</h2>
+            
+            <div style="display: flex; gap: 10px; align-items: center;">
+              <button @click="previousNote" style="background: none; border: none; color: white; font-family: Arial, sans-serif; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 5px;">
+                <i class="fas fa-chevron-left" style="font-size: 12px;"></i> Vorheriger
+              </button>
+              <button @click="nextNote" style="background: none; border: none; color: white; font-family: Arial, sans-serif; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 5px;">
+                Nächster <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
+              </button>
+            </div>
+            <i @click="$emit('close')" class="fas fa-times" style="font-size: 20px; cursor: pointer; margin-left: 15px;"></i>
+          </div>
+          <div class="modal-body" style="padding: 20px; display: flex; flex: 1; overflow: hidden;">
+            <template>
+            <div style="width: 50%; height: 100%; overflow: auto;">
+              <iframe ref="iframe" v-if="currentRow" :src="'/WarehouseShippingNote/createPDF?id=' + currentRow.id" style="width: 100%; height: 100%; border: none;"></iframe>
+            </div>
+            <div style="width: 50%; height: 100%; padding-left: 20px; display: flex; flex-direction: column;">
+              <div style="margin-bottom: 20px;">
+                <button @click="activeTab = 'Editieren'" :style="tabStyle('Editieren')">Editieren</button>
+                <button @click="activeTab = 'Logs'" :style="tabStyle('Logs')">Logs</button>
+                
+                <div style="margin-top: 20px;" v-if="currentRow">
+                  <template v-for="action in window.TT_CONFIG.CRUD_CONFIG.additionalActions">
+                    <template v-if="typeof action.condition === 'function' ? action.condition(currentRow) : true && action.key !== 'add_log' && action.key !== 'print'">
+                        <i @click="changeStatus('status_to_' + action.key, currentRow)" :class="action.class" style="font-size: 20px; cursor: pointer; margin-right: 10px;"></i>
+                    </template>
+                  </template>
+                </div>
+                
+              </div>
+              <div v-if="activeTab === 'Editieren'" style="flex: 1; overflow: auto;" class="see-through-test-modal">
+                <warehouse-shipping-note-modal v-if="currentRow" :id="currentRow.id" @close="fetchData" ref="modal"/>
+              </div>
+              <div v-if="activeTab === 'Logs'" style="flex: 1; overflow: auto;" class="see-through-test-modal">
+                <warehouse-shipping-note-logs :shipping-note-id="currentRow.id"/>
+                <add-log-modal-sn v-if="currentRow" :shipping-note-id="currentRow.id" @close="fetchData"/>
+              </div>
+            </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    `,
+    data() {
+        return {
+            currentPage: 1,
+            perPage: 1,
+            rows: [],
+            activeTab: 'Editieren',
+            window: window
+        }
+    },
+    computed: {
+        currentRow() {
+            return this.rows[0];
+        }
+    },
+    methods: {
+        tabStyle(tab) {
+            return {
+                padding: '10px 20px',
+                cursor: 'pointer',
+                backgroundColor: this.activeTab === tab ? '#005384' : '#f7c423',
+                color: 'white',
+                border: 'none',
+                borderRadius: '5px',
+                marginRight: '10px'
+            };
+        },
+        previousNote() {
+            if (this.currentPage > 1) {
+                this.currentPage--;
+                this.fetchData();
+            }
+        },
+        nextNote() {
+            if (this.currentPage) {
+                this.currentPage++;
+                this.fetchData();
+            }
+        },
+        async changeStatus(action, row) {
+            this.$emit('status_to_' + action, row);
+            await new Promise(resolve => setTimeout(resolve, 50));
+            await this.fetchData();
+        },
+        async fetchData() {
+            this.loading = true;
+            this.rows = [];
+            const response = await axios.post(window.TT_CONFIG.BASE_PATH + '/WarehouseShippingNote/get', {
+                pagination: {page: this.currentPage, per_page: this.perPage},
+                filters: {status: this.wantedState},
+            })
+
+            this.rows = response.data.rows;
+
+            this.loading = false;
+        }
+    },
+    mounted() {
+        this.fetchData();
+    }
+});
+
 // noinspection JSUnusedLocalSymbols
 Vue.component('warehouse-shipping-note', {
     //language=Vue
     template: `
                 <tt-card>
+                  <warehouse-shipping-note-see-through @close="shippingNoteSeeThrough = false" v-if="shippingNoteSeeThrough !== false" :wanted-state="'accepted'"/>
                   <warehouse-shipping-note-modal v-if="shippingNoteModalId" :id="shippingNoteModalId"
                                                  @close="shippingNoteModalId = null;$refs.table.$refs.table.refreshTable()"
                                                  @open-signing-modal="signingShippingNoteId = $event"/>
@@ -266,6 +379,17 @@ Vue.component('warehouse-shipping-note', {
                   <add-log-modal-sn v-if="addLogModalId" :shipping-note-id="addLogModalId" @close="addLogModalId = null"/>
 
                   <button @click="shippingNoteModalId = 'create'" class="btn btn-primary">Lieferschein erstellen</button>
+                    <div class="dropdown" style="display: inline-block; margin-left: 10px;" v-if="window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1'">-
+                        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Durchschau-Modus
+                        </button>
+                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                            <a class="dropdown-item" @click="shippingNoteSeeThrough = 'new'">Neue</a>
+                            <a class="dropdown-item" @click="shippingNoteSeeThrough = 'in_progress'">In Bearbeitung</a>
+                            <a class="dropdown-item" @click="shippingNoteSeeThrough = 'accepted'">Akzeptierte</a>
+                            <a class="dropdown-item" @click="shippingNoteSeeThrough = 'on_hold'">On Hold</a>
+                        </div>
+                    </div>
 
                   <tt-table-crud emit-edit
                                  @openHistory="historyModal = true; historyModalId = $event.id"
@@ -293,7 +417,8 @@ Vue.component('warehouse-shipping-note', {
             historyModalId:        null,
             shippingNoteModalId:   null,
             signingShippingNoteId: null,
-            addLogModalId:         null
+            addLogModalId:         null,
+            shippingNoteSeeThrough: false
         }
     },
     mounted() {