diff --git a/app/Http/Controllers/ClientPortal/InvoiceController.php b/app/Http/Controllers/ClientPortal/InvoiceController.php
index 0f75cf33c6..1c6ee81eba 100644
--- a/app/Http/Controllers/ClientPortal/InvoiceController.php
+++ b/app/Http/Controllers/ClientPortal/InvoiceController.php
@@ -54,11 +54,11 @@ class InvoiceController extends Controller
             'invoice' => $invoice,
         ];
 
-        if ($request->query('mode') === 'fullscreen') {
-            return $this->render('invoices.show.fullscreen', $data);
+        if ($request->query('mode') === 'portal') {
+            return $this->render('invoices.show', $data);
         }
 
-        return $this->render('invoices.show', $data);
+        return $this->render('invoices.show.fullscreen', $data);
     }
 
     /**
@@ -135,7 +135,7 @@ class InvoiceController extends Controller
         ];
 
 // nlog($data);
-   
+
         return $this->render('invoices.payment', $data);
     }
 
diff --git a/app/Http/Controllers/ClientPortal/QuoteController.php b/app/Http/Controllers/ClientPortal/QuoteController.php
index 5200f2d628..85e7ab4a07 100644
--- a/app/Http/Controllers/ClientPortal/QuoteController.php
+++ b/app/Http/Controllers/ClientPortal/QuoteController.php
@@ -43,11 +43,11 @@ class QuoteController extends Controller
             'quote' => $quote,
         ];
 
-        if ($request->query('mode') === 'fullscreen') {
-            return $this->render('quotes.show.fullscreen', $data);
+        if ($request->query('mode') === 'portal') {
+            return $this->render('quotes.show', $data);
         }
 
-        return $this->render('quotes.show', $data);
+        return $this->render('quotes.show.fullscreen', $data);
     }
 
     public function bulk(ProcessQuotesInBulkRequest $request)
@@ -111,7 +111,7 @@ class QuoteController extends Controller
             foreach ($quotes as $quote) {
                 $quote->service()->approve(auth()->user())->save();
                 event(new QuoteWasApproved(auth('contact')->user(), $quote, $quote->company, Ninja::eventVars()));
-                
+
                 if (request()->has('signature') && !is_null(request()->signature) && !empty(request()->signature)) {
                     InjectSignature::dispatch($quote, request()->signature);
                 }
diff --git a/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php b/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php
index baf97af907..66da6013ce 100644
--- a/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php
@@ -100,11 +100,11 @@
                                         <input type="hidden" name="invoices[]" value="{{ $invoice->hashed_id }}">
                                         <input type="hidden" name="action" value="payment">
                                         <button class="px-2 py-1 mr-3 text-xs uppercase button button-primary bg-primary" data-cy="pay-now">
-                                            @lang('texts.pay_now')
+                                            {{ ctrans('texts.pay_now') }}
                                         </button>
                                     </form>
                                 @endif
-                                <a href="{{ route('client.invoice.show', $invoice->hashed_id) }}?mode=fullscreen" class="button-link text-primary">
+                                <a href="{{ route('client.invoice.show', $invoice->hashed_id) }}" class="button-link text-primary">
                                     {{ ctrans('texts.view') }}
                                 </a>
                             </td>
diff --git a/resources/views/portal/ninja2020/components/livewire/quotes-table.blade.php b/resources/views/portal/ninja2020/components/livewire/quotes-table.blade.php
index abf0f70751..ab028ee688 100644
--- a/resources/views/portal/ninja2020/components/livewire/quotes-table.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/quotes-table.blade.php
@@ -91,7 +91,7 @@
                             </td>
                             <td class="flex items-center justify-end px-6 py-4 text-sm font-medium leading-5 whitespace-no-wrap">
                                 <a href="{{ route('client.quote.show', $quote->hashed_id) }}" class="button-link text-primary">
-                                    @lang('texts.view')
+                                    {{ ctrans('texts.view') }}
                                 </a>
                             </td>
                         </tr>
@@ -118,4 +118,4 @@
 
 @push('footer')
     <script src="{{ asset('js/clients/quotes/action-selectors.js') }}"></script>
-@endpush
\ No newline at end of file
+@endpush
diff --git a/resources/views/portal/ninja2020/invoices/show/fullscreen.blade.php b/resources/views/portal/ninja2020/invoices/show/fullscreen.blade.php
index 6499f3996e..5690fcedf2 100644
--- a/resources/views/portal/ninja2020/invoices/show/fullscreen.blade.php
+++ b/resources/views/portal/ninja2020/invoices/show/fullscreen.blade.php
@@ -5,21 +5,26 @@
     @if($invoice->isPayable())
         <form action="{{ route('client.invoices.bulk') }}" method="post">
             @csrf
-            <div class="bg-white shadow sm:rounded-lg mb-4" translate>
+            <div class="bg-white shadow sm:rounded-lg">
                 <div class="px-4 py-5 sm:p-6">
                     <div class="sm:flex sm:items-start sm:justify-between">
                         <div>
                             <h3 class="text-lg leading-6 font-medium text-gray-900">
-                                {{ ctrans('texts.invoice_number_placeholder', ['invoice' => $invoice->number])}} - {{ ctrans('texts.unpaid') }}
+                                {{ ctrans('texts.invoice_number_placeholder', ['invoice' => $invoice->number])}}
+                                - {{ ctrans('texts.unpaid') }}
                             </h3>
                             <div class="mt-2 max-w-xl text-sm leading-5 text-gray-500">
                                 <p translate>
-                                    {{ ctrans('texts.invoice_still_unpaid') }}
-                                    <!-- This invoice is still not paid. Click the button to complete the payment. -->
+                                {{ ctrans('texts.invoice_still_unpaid') }}
+                                <!-- This invoice is still not paid. Click the button to complete the payment. -->
                                 </p>
                             </div>
                         </div>
                         <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
+                            <a href="{{ route('client.invoice.show', $invoice->hashed_id) }}?mode=portal" class="mr-4 text-primary">
+                                &#8592; {{ ctrans('texts.client_portal') }}
+                            </a>
+
                             <div class="inline-flex rounded-md shadow-sm">
                                 <input type="hidden" name="invoices[]" value="{{ $invoice->hashed_id }}">
                                 <input type="hidden" name="action" value="payment">
@@ -31,17 +36,18 @@
             </div>
         </form>
     @else
-    <div class="bg-white shadow sm:rounded-lg mb-4" translate>
-    <div class="px-4 py-5 sm:p-6">
-        <div class="sm:flex sm:items-start sm:justify-between">
-            <div>
-                <h3 class="text-lg leading-6 font-medium text-gray-900">
-                    {{ ctrans('texts.invoice_number_placeholder', ['invoice' => $invoice->number])}} - {{ ctrans('texts.unpaid') }}
-                </h3>
+        <div class="bg-white shadow sm:rounded-lg mb-4" translate>
+            <div class="px-4 py-5 sm:p-6">
+                <div class="sm:flex sm:items-start sm:justify-between">
+                    <div>
+                        <h3 class="text-lg leading-6 font-medium text-gray-900">
+                            {{ ctrans('texts.invoice_number_placeholder', ['invoice' => $invoice->number])}}
+                            - {{ ctrans('texts.unpaid') }}
+                        </h3>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
-    </div>
     @endif
 
     <iframe src="{{ $invoice->pdf_file_path() }}" class="h-screen w-full border-0"></iframe>
diff --git a/resources/views/portal/ninja2020/quotes/includes/actions.blade.php b/resources/views/portal/ninja2020/quotes/includes/actions.blade.php
new file mode 100644
index 0000000000..eb0f2328e3
--- /dev/null
+++ b/resources/views/portal/ninja2020/quotes/includes/actions.blade.php
@@ -0,0 +1,31 @@
+<form action="{{ route('client.quotes.bulk') }}" method="post">
+    @csrf
+    <input type="hidden" name="action" value="approve">
+    <input type="hidden" name="quotes[]" value="{{ $quote->hashed_id }}">
+
+    <div class="bg-white shadow sm:rounded-lg">
+        <div class="px-4 py-5 sm:p-6">
+            <div class="sm:flex sm:items-start sm:justify-between">
+                <div>
+                    <h3 class="text-lg leading-6 font-medium text-gray-900">
+                        {{ ctrans('texts.waiting_for_approval') }}
+                    </h3>
+                    <div class="mt-2 max-w-xl text-sm leading-5 text-gray-500">
+                        <p translate>
+                            {{ ctrans('texts.quote_still_not_approved') }}
+                        </p>
+                    </div>
+                </div>
+
+                <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
+                    @yield('quote-not-approved-right-side')
+
+                    <div class="inline-flex rounded-md shadow-sm">
+                        <input type="hidden" name="action" value="payment">
+                        <button class="button button-primary bg-primary">{{ ctrans('texts.approve') }}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
diff --git a/resources/views/portal/ninja2020/quotes/show.blade.php b/resources/views/portal/ninja2020/quotes/show.blade.php
index b0fac3c64c..cc7232016a 100644
--- a/resources/views/portal/ninja2020/quotes/show.blade.php
+++ b/resources/views/portal/ninja2020/quotes/show.blade.php
@@ -15,50 +15,28 @@
     @endif
 
     @if(!$quote->isApproved())
-        <form action="{{ route('client.quotes.bulk') }}" method="post">
-            @csrf
-            <input type="hidden" name="action" value="approve">
-            <input type="hidden" name="quotes[]" value="{{ $quote->hashed_id }}">
-            <div class="bg-white shadow sm:rounded-lg mb-4" translate>
-                <div class="px-4 py-5 sm:p-6">
-                    <div class="sm:flex sm:items-start sm:justify-between">
-                        <div>
-                            <h3 class="text-lg leading-6 font-medium text-gray-900" translate>
-                                {{ ctrans('texts.waiting_for_approval') }}
-                            </h3>
-                            <div class="mt-2 max-w-xl text-sm leading-5 text-gray-500">
-                                <p translate>
-                                    {{ ctrans('texts.quote_still_not_approved') }}
-                                </p>
-                            </div>
-                        </div>
-                        <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
-                            <div class="inline-flex rounded-md shadow-sm">
-                                <input type="hidden" name="action" value="payment">
-                                <button class="button button-primary bg-primary">{{ ctrans('texts.approve') }}</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
+        <div class="mb-4">
+            @include('portal.ninja2020.quotes.includes.actions', ['quote' => $quote])
+        </div>
     @endif
 
     <div class="flex items-center justify-between">
         <section class="flex items-center">
             <div class="items-center" style="display: none" id="pagination-button-container">
-                <button class="input-label focus:outline-none hover:text-blue-600 transition ease-in-out duration-300" id="previous-page-button" title="Previous page">
+                <button class="input-label focus:outline-none hover:text-blue-600 transition ease-in-out duration-300"
+                        id="previous-page-button" title="Previous page">
                     <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                     </svg>
                 </button>
-                <button class="input-label focus:outline-none hover:text-blue-600 transition ease-in-out duration-300" id="next-page-button" title="Next page">
+                <button class="input-label focus:outline-none hover:text-blue-600 transition ease-in-out duration-300"
+                        id="next-page-button" title="Next page">
                     <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                     </svg>
                 </button>
             </div>
-            <span class="text-sm text-gray-700 ml-2">{{ ctrans('texts.page') }}: 
+            <span class="text-sm text-gray-700 ml-2">{{ ctrans('texts.page') }}:
                 <span id="current-page-container"></span>
                 <span>{{ strtolower(ctrans('texts.of')) }}</span>
                 <span id="total-page-container"></span>
@@ -68,25 +46,48 @@
             <div class="flex items-center mr-4 space-x-1">
                 <span class="text-gray-600 mr-2" id="zoom-level">175%</span>
                 <a href="#" id="zoom-in">
-                    <svg class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 cursor-pointer" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
+                    <svg class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 cursor-pointer"
+                         xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                        <line x1="11" y1="8" x2="11" y2="14"></line>
+                        <line x1="8" y1="11" x2="14" y2="11"></line>
+                    </svg>
                 </a>
                 <a href="#" id="zoom-out">
-                    <svg class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 cursor-pointer" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
+                    <svg class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 cursor-pointer"
+                         xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                        <line x1="8" y1="11" x2="14" y2="11"></line>
+                    </svg>
                 </a>
             </div>
-            <div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="relative inline-block text-left">
+            <div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
+                 class="relative inline-block text-left">
                 <div>
-                    <button @click="open = !open" class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
-                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-                        <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-                    </svg>
+                    <button @click="open = !open"
+                            class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
+                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                            <path
+                                d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/>
+                        </svg>
                     </button>
                 </div>
-                <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg">
+                <div x-show="open" x-transition:enter="transition ease-out duration-100"
+                     x-transition:enter-start="transform opacity-0 scale-95"
+                     x-transition:enter-end="transform opacity-100 scale-100"
+                     x-transition:leave="transition ease-in duration-75"
+                     x-transition:leave-start="transform opacity-100 scale-100"
+                     x-transition:leave-end="transform opacity-0 scale-95"
+                     class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg">
                     <div class="rounded-md bg-white shadow-xs">
-                    <div class="py-1">
-                        <a target="_blank" href="?mode=fullscreen" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">{{ ctrans('texts.open_in_new_tab') }}</a>
-                    </div>
+                        <div class="py-1">
+                            <a target="_blank" href="?mode=fullscreen"
+                               class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">{{ ctrans('texts.open_in_new_tab') }}</a>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/resources/views/portal/ninja2020/quotes/show/fullscreen.blade.php b/resources/views/portal/ninja2020/quotes/show/fullscreen.blade.php
index 98778a4a59..c5e08efa83 100644
--- a/resources/views/portal/ninja2020/quotes/show/fullscreen.blade.php
+++ b/resources/views/portal/ninja2020/quotes/show/fullscreen.blade.php
@@ -3,34 +3,14 @@
 
 @section('body')
     @if(!$quote->isApproved())
-        <form action="{{ route('client.quotes.bulk') }}" method="post">
-            @csrf
-            <input type="hidden" name="action" value="approve">
-            <input type="hidden" name="quotes[]" value="{{ $quote->hashed_id }}">
-            <div class="bg-white" translate>
-                <div class="px-4 py-5 sm:p-6">
-                    <div class="sm:flex sm:items-start sm:justify-between">
-                        <div>
-                            <h3 class="text-lg leading-6 font-medium text-gray-900" translate>
-                                {{ ctrans('texts.waiting_for_approval') }}
-                            </h3>
-                            <div class="mt-2 max-w-xl text-sm leading-5 text-gray-500">
-                                <p translate>
-                                    {{ ctrans('texts.quote_still_not_approved') }}
-                                </p>
-                            </div>
-                        </div>
-                        <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
-                            <div class="inline-flex rounded-md shadow-sm">
-                                <input type="hidden" name="action" value="payment">
-                                <button class="button button-primary bg-primary">{{ ctrans('texts.approve') }}</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
+        @component('portal.ninja2020.quotes.includes.actions', ['quote' => $quote])
+            @section('quote-not-approved-right-side')
+                <a href="{{ route('client.quote.show', $quote->hashed_id) }}?mode=portal" class="mr-4 text-primary">
+                    &#8592; {{ ctrans('texts.client_portal') }}
+                </a>
+            @endsection
+        @endcomponent
     @endif
 
     <iframe src="{{ $quote->pdf_file_path() }}" class="h-screen w-full border-0"></iframe>
-@endsection
\ No newline at end of file
+@endsection