diff --git a/app/Http/Controllers/ClientPortal/InvoiceController.php b/app/Http/Controllers/ClientPortal/InvoiceController.php
index 715816def901..ab632694febc 100644
--- a/app/Http/Controllers/ClientPortal/InvoiceController.php
+++ b/app/Http/Controllers/ClientPortal/InvoiceController.php
@@ -52,6 +52,10 @@ class InvoiceController extends Controller
             'invoice' => $invoice,
         ];
 
+        if ($request->query('mode') === 'fullscreen') {
+            return $this->render('invoices.show.fullscreen', $data);
+        }
+
         return $this->render('invoices.show', $data);
     }
 
diff --git a/app/Http/Controllers/ClientPortal/QuoteController.php b/app/Http/Controllers/ClientPortal/QuoteController.php
index 751b359ae893..8421ea3310b0 100644
--- a/app/Http/Controllers/ClientPortal/QuoteController.php
+++ b/app/Http/Controllers/ClientPortal/QuoteController.php
@@ -37,9 +37,15 @@ class QuoteController extends Controller
      */
     public function show(ShowQuoteRequest $request, Quote $quote)
     {
-        return $this->render('quotes.show', [
+        $data = [
             'quote' => $quote,
-        ]);
+        ];
+
+        if ($request->query('mode') === 'fullscreen') {
+            return $this->render('quotes.show.fullscreen', $data);
+        }
+
+        return $this->render('quotes.show', $data);
     }
 
     public function bulk(ProcessQuotesInBulkRequest $request)
diff --git a/resources/views/portal/ninja2020/invoices/show.blade.php b/resources/views/portal/ninja2020/invoices/show.blade.php
index 6825a3cb5f2a..b7ea1b074103 100644
--- a/resources/views/portal/ninja2020/invoices/show.blade.php
+++ b/resources/views/portal/ninja2020/invoices/show.blade.php
@@ -97,7 +97,7 @@
                 <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="{{ $invoice->pdf_file_path() }}" 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>
+                        <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>
diff --git a/resources/views/portal/ninja2020/invoices/show/fullscreen.blade.php b/resources/views/portal/ninja2020/invoices/show/fullscreen.blade.php
new file mode 100644
index 000000000000..4597fa5a8f10
--- /dev/null
+++ b/resources/views/portal/ninja2020/invoices/show/fullscreen.blade.php
@@ -0,0 +1,36 @@
+@extends('portal.ninja2020.layout.clean')
+@section('meta_title', ctrans('texts.view_invoice'))
+
+@section('body')
+    @if($invoice->isPayable())
+        <form action="{{ route('client.invoices.bulk') }}" method="post">
+            @csrf
+            <div class="bg-white">
+                <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.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. -->
+                                </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="invoices[]" value="{{ $invoice->hashed_id }}">
+                                <input type="hidden" name="action" value="payment">
+                                <button class="button button-primary">@lang('texts.pay_now')</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    @endif
+
+    <iframe src="{{ $invoice->pdf_file_path() }}" class="h-screen w-full border-0"></iframe>
+@endsection
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/quotes/show.blade.php b/resources/views/portal/ninja2020/quotes/show.blade.php
index ba2873ed8dc2..c7ad111ba703 100644
--- a/resources/views/portal/ninja2020/quotes/show.blade.php
+++ b/resources/views/portal/ninja2020/quotes/show.blade.php
@@ -88,7 +88,7 @@
                 <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="{{ $quote->pdf_file_path() }}" 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>
+                        <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>
diff --git a/resources/views/portal/ninja2020/quotes/show/fullscreen.blade.php b/resources/views/portal/ninja2020/quotes/show/fullscreen.blade.php
new file mode 100644
index 000000000000..be74d59f60f3
--- /dev/null
+++ b/resources/views/portal/ninja2020/quotes/show/fullscreen.blade.php
@@ -0,0 +1,36 @@
+@extends('portal.ninja2020.layout.clean')
+@section('meta_title', ctrans('texts.view_quote'))
+
+@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">@lang('texts.approve')</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    @endif
+
+    <iframe src="{{ $quote->pdf_file_path() }}" class="h-screen w-full border-0"></iframe>
+@endsection
\ No newline at end of file