diff --git a/app/Http/Controllers/ClientPortal/InvitationController.php b/app/Http/Controllers/ClientPortal/InvitationController.php
index 25fea802d1f5..a1d4949f0175 100644
--- a/app/Http/Controllers/ClientPortal/InvitationController.php
+++ b/app/Http/Controllers/ClientPortal/InvitationController.php
@@ -136,8 +136,11 @@ class InvitationController extends Controller
         } else {
             $is_silent = 'true';
 
+            return redirect()->route('client.'.$entity.'.show', [$entity => $this->encodePrimaryKey($invitation->{$key}), 'silent' => $is_silent]);
+
             return redirect()->route('client.'.$entity.'.show', [$entity => $this->encodePrimaryKey($invitation->{$key}), 'silent' => $is_silent])->header('Cache-Control', 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0');
         }
+        return redirect()->route('client.'.$entity.'.show', [$entity => $this->encodePrimaryKey($invitation->{$key})]);
 
         return redirect()->route('client.'.$entity.'.show', [$entity => $this->encodePrimaryKey($invitation->{$key})])->header('Cache-Control', 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0');
     }
diff --git a/app/Http/Controllers/ClientPortal/InvoiceController.php b/app/Http/Controllers/ClientPortal/InvoiceController.php
index 838bf1dd1b09..8a0013c6d8f9 100644
--- a/app/Http/Controllers/ClientPortal/InvoiceController.php
+++ b/app/Http/Controllers/ClientPortal/InvoiceController.php
@@ -206,8 +206,6 @@ class InvoiceController extends Controller
 
             $file = $invoice->service()->getInvoicePdf(auth()->guard('contact')->user());
 
-            // return response()->download(file_get_contents(public_path($file)));
-
             return response()->streamDownload(function () use ($file) {
                 echo Storage::get($file);
             }, basename($file), ['Content-Type' => 'application/pdf']);
diff --git a/app/Http/Livewire/PdfSlot.php b/app/Http/Livewire/PdfSlot.php
index 9b52146a3412..8eda7b1c4ded 100644
--- a/app/Http/Livewire/PdfSlot.php
+++ b/app/Http/Livewire/PdfSlot.php
@@ -12,8 +12,21 @@
 
 namespace App\Http\Livewire;
 
-use App\Libraries\MultiDB;
+use App\Utils\Number;
 use Livewire\Component;
+use App\Utils\HtmlEngine;
+use App\Libraries\MultiDB;
+use App\Models\QuoteInvitation;
+use App\Utils\VendorHtmlEngine;
+use App\Models\CreditInvitation;
+use App\Services\Pdf\PdfBuilder;
+use App\Services\Pdf\PdfService;
+use App\Models\InvoiceInvitation;
+use App\Services\Pdf\PdfDesigner;
+use App\Services\Pdf\PdfConfiguration;
+use App\Models\PurchaseOrderInvitation;
+use App\Models\RecurringInvoiceInvitation;
+use App\Jobs\Vendor\CreatePurchaseOrderPdf;
 
 class PdfSlot extends Component
 {
@@ -27,23 +40,212 @@ class PdfSlot extends Component
 
     public $url;
     
+    private $settings;
+
+    private $html_variables;
+
+    private $entity_type;
+
+    protected $listeners = ['viewportChanged' => 'getPdf'];
+
     public function mount()
     {
         MultiDB::setDb($this->db);
     }
 
+    public function getPdf()
+    {        
+        $this->pdf = $this->entity->fullscreenPdfViewer($this->invitation);
+    }
+
+    public function downloadPdf()
+    {
+        
+        $file_name = $this->entity->numberFormatter().'.pdf';
+
+        if($this->entity instanceof \App\Models\PurchaseOrder)
+            $file = (new CreatePurchaseOrderPdf($this->invitation, $this->invitation->company->db))->rawPdf();
+        else
+            $file = (new \App\Jobs\Entity\CreateRawPdf($this->invitation, $this->invitation->company->db))->handle();
+
+        $headers = ['Content-Type' => 'application/pdf'];
+
+        return response()->streamDownload(function () use ($file) {
+            echo $file;
+        }, $file_name, $headers);
+
+    }
+
     public function render()
     {
+        $this->entity_type = $this->resolveEntityType();
+
+        $this->settings = $this->entity->client ? $this->entity->client->getMergedSettings() : $this->entity->company->settings;
+
+        $this->html_variables = $this->entity->client ?
+                            (new HtmlEngine($this->invitation))->generateLabelsAndValues() :
+                            (new VendorHtmlEngine($this->invitation))->generateLabelsAndValues();
+
         return render('components.livewire.pdf-slot', [
             'invitation' => $this->invitation,
             'entity' => $this->entity,
+            'data' => $this->invitation->company->settings,
+            'entity_type' => $this->entity_type,
+            'products' => $this->getProducts(),
+            'services' => $this->getServices(),
+            'amount' => Number::formatMoney($this->entity->amount, $this->entity->client ?: $this->entity->vendor),
+            'balance' => Number::formatMoney($this->entity->balance, $this->entity->client ?: $this->entity->vendor),
+            'company_details' => $this->getCompanyDetails(),
+            'company_address' => $this->getCompanyAddress(),
+            'entity_details' => $this->getEntityDetails(),
+            'user_details' => $this->getUserDetails(),
+            'user_name' => $this->getUserName(),
+
         ]);
     }
 
-    public function getPdf()
+    private function convertVariables($string): string
     {
-        
-        $this->pdf =  $this->entity->fullscreenPdfViewer($this->invitation);
+
+        $html = strtr($string, $this->html_variables['labels']);
+        $html = strtr($html, $this->html_variables['values']);
+
+        return $html;
 
     }
+
+    private function getCompanyAddress()
+    {
+        
+        $company_address = "";
+
+        foreach($this->settings->pdf_variables->company_address as $variable) {
+            $company_address .= "<p>{$variable}</p>";
+        }
+
+        return $this->convertVariables($company_address);
+
+    }
+
+    private function getCompanyDetails()
+    {
+        $company_details = "";
+
+        foreach($this->settings->pdf_variables->company_details as $variable) {
+            $company_details .= "<p>{$variable}</p>";
+        }
+
+        return $this->convertVariables($company_details);
+  
+    }
+
+    private function getEntityDetails()
+    {
+        $entity_details = "";
+
+        if($this->entity_type == 'invoice' || $this->entity_type == 'recurring_invoice') {
+            foreach($this->settings->pdf_variables->invoice_details as $variable) 
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block entity-field'>{$variable}</p></div>";
+    
+        }
+        elseif($this->entity_type == 'quote'){
+            foreach($this->settings->pdf_variables->quote_details as $variable)
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block entity-field'>{$variable}</p></div>";
+        }
+        elseif($this->entity_type == 'credit') {
+            foreach($this->settings->pdf_variables->credit_details as $variable)
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block entity-field'>{$variable}</p></div>";
+        }
+        elseif($this->entity_type == 'purchase_order'){
+            foreach($this->settings->pdf_variables->purchase_order_details as $variable)
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block entity-field'>{$variable}</p></div>";
+        }
+            
+        return $this->convertVariables($entity_details);
+
+    }
+
+    private function getUserName()
+    {
+        $name = ctrans('texts.details');
+
+        if($this->entity_type == 'purchase_order' && isset($this->settings->pdf_variables->vendor_details[0])) {
+            $name = $this->settings->pdf_variables->vendor_details[0];
+
+        } elseif(isset($this->settings->pdf_variables->client_details[0])) {
+
+            $name = $this->settings->pdf_variables->client_details[0];
+        }
+                
+        return $this->convertVariables($name);
+
+    }
+
+    private function getUserDetails()
+    {
+        $user_details = "";
+
+        if($this->entity_type == 'purchase_order') {
+            foreach(array_slice($this->settings->pdf_variables->vendor_details,1) as $variable) {
+                $user_details .= "<p>{$variable}</p>";
+            }
+        }
+        else{
+            foreach(array_slice($this->settings->pdf_variables->client_details,1) as $variable) {
+                $user_details .= "<p>{$variable}</p>";
+            }
+        }
+        
+        return $this->convertVariables($user_details);
+    }
+
+    private function getProducts()
+    {
+        $product_items = collect($this->entity->line_items)->filter(function ($item) {
+            return $item->type_id == 1 || $item->type_id == 6 || $item->type_id == 5;
+        })->map(function ($item){
+            return [
+                'quantity' => $item->quantity,
+                'cost' => Number::formatMoney($item->cost, $this->entity->client ?: $this->entity->vendor),
+                'notes' => $item->notes,
+                'line_total' => Number::formatMoney($item->line_total, $this->entity->client ?: $this->entity->vendor),
+            ];
+        });
+
+        return $product_items;
+    }
+
+    private function getServices()
+    {
+        $task_items = collect($this->entity->line_items)->filter(function ($item) {
+            return $item->type_id == 2;
+        })->map(function ($item){
+            return [
+                'quantity' => $item->quantity,
+                'cost' => Number::formatMoney($item->cost, $this->entity->client ?: $this->entity->vendor),
+                'notes' => $item->notes,
+                'line_total' => Number::formatMoney($item->line_total, $this->entity->client ?: $this->entity->vendor),
+            ];
+        });
+
+        return $task_items;
+
+    }
+
+    private function resolveEntityType() :string
+    {
+        if ($this->invitation instanceof InvoiceInvitation) {
+            return 'invoice';
+        } elseif ($this->invitation instanceof QuoteInvitation) {
+            return 'quote';
+        } elseif ($this->invitation instanceof CreditInvitation) {
+            return 'credit';
+        } elseif ($this->invitation instanceof RecurringInvoiceInvitation) {
+            return 'recurring_invoice';
+        } elseif ($this->invitation instanceof PurchaseOrderInvitation) {
+            return 'purchase_order';
+        }
+
+        return '';
+    }
 }
diff --git a/app/Services/Pdf/PdfBuilder.php b/app/Services/Pdf/PdfBuilder.php
index 78d8d38fb2a9..0e55f97433f7 100644
--- a/app/Services/Pdf/PdfBuilder.php
+++ b/app/Services/Pdf/PdfBuilder.php
@@ -102,7 +102,12 @@ class PdfBuilder
 
         $this->document = $document;
 
-        // $this->xpath = new DOMXPath($document);
+        return $this;
+    }
+
+    public function setDocument($document): self
+    {
+        $this->document = $document;
 
         return $this;
     }
@@ -131,6 +136,13 @@ class PdfBuilder
         return $this;
     }
 
+    public function setSections($sections): self
+    {
+        $this->sections = $sections;
+
+        return $this;
+    }
+
     /**
      * Generates delivery note sections
      *
@@ -1641,6 +1653,7 @@ class PdfBuilder
 
     public function updateVariables()
     {
+
         $html = strtr($this->getCompiledHTML(), $this->service->html_variables['labels']);
 
         $html = strtr($html, $this->service->html_variables['values']);
diff --git a/resources/views/portal/ninja2020/components/html-viewer.blade.php b/resources/views/portal/ninja2020/components/html-viewer.blade.php
new file mode 100644
index 000000000000..8b27738e3a54
--- /dev/null
+++ b/resources/views/portal/ninja2020/components/html-viewer.blade.php
@@ -0,0 +1,226 @@
+
+<style>
+
+table, th, td {
+  /* border: 1px solid black; */
+  border-collapse: collapse;
+}
+
+td
+{
+ max-width: 1px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+span {
+    display: block;
+    padding: 3px;
+    margin-right:10px;
+}
+
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+</style>
+
+<div class="w-full bg-white py-3 border-2 shadow sm:rounded-lg">
+
+    <div class="px-3 border-fuchsia-600 border-b-2 pb-3">
+    
+        <div id="company-details" class="mx-auto">
+            {!! $company_details !!}
+        </div>
+
+    </div>
+
+    <div class="border-fuchsia-600 border-b-2 pb-3 mt-3">
+
+        <div id="entity-details"> {!! $entity_details !!} </div>
+
+    </div>
+
+
+    <div id="user-details" class="mt-3 px-3 border-b-2 border-fuschia-600 flex flex-col items-end"> 
+
+        <div x-data="{ show_user: false }" class="mb-3">
+
+            <button @click="show_user = !show_user" :aria-expanded="show_user ? 'true' : 'false'" :class="{ 'active': show_user }" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
+                <span class="overflow-ellipsis  overflow-hidden">{{ $user_name }}</span>
+                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
+            </button>
+
+            <div id="terms" class="py-3"  x-show="show_user">
+                {!! $user_details !!}
+            </div>
+
+
+        </div>
+         
+    </div>
+
+    @if($products->count() > 0)
+    <div id="product-details" class="py-6 mr-5 ml-5">
+        <table width="100%">
+            <thead>
+                <tr class="border-b-2">
+                    <th style="text-align:left; width:70%; padding-left:2px;">Item</th>
+                    <th style="text-align:right; width:30%; padding-right:2px;">Amount</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach($products as $product)
+                <tr style="display: table-row;" class="border-b-2">
+                    <td>
+                        <div class="product-information">
+                            <div class="item-details">
+                                <p class="mt-2">{{ $product['quantity'] }} × {{ $product['cost'] }}</p> 
+                                <p class="overflow-ellipsis overflow-hidden px-1 mb-2">{{ $product['notes'] }}</p>
+                            </div>
+                        </div>
+                    </td>
+                    <td style="text-align:right; padding-right:2px;">{{ $product['line_total'] }}</td>
+                </tr>
+                @endforeach                   
+            </tbody>
+        </table>
+    </div>
+    @endif 
+    @if($services->count() > 0)
+    <div id="task-details" class="py-6 mr-3 ml-3">
+        <table width="100%">
+            <thead>
+                <tr class="border-bottom">
+                    <th style="text-align:left; width:70%; padding-left:2px;">Service</th>
+                    <th style="text-align:right; width:30%; padding-right:2px;">Amount</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach($services as $service)
+                <tr style="display: table-row;">
+                    <td>
+                        <div class="">
+                            <div class="">
+                                <p class="mt-2">{{ $service['quantity'] }} × {{ $service['cost'] }}</p> 
+                                <p class="overflow-ellipsis overflow-hidden px-1 mb-2">{{ $service['notes'] }}</p>
+                            </div>
+                        </div>
+                    </td>
+                    <td style="text-align:right; padding-right:2px;">{{ $service['line_total'] }}</td>
+                </tr>
+                @endforeach
+            </tbody>
+        </table>
+    </div>
+    @endif
+    <div id="totals" class="mb-10 mr-3 ml-3">
+        <table width="100%">
+            <tbody>
+                <tr>
+                    <td style="text-align:left; padding-right:10px;" class="text-lg">{{ ctrans('texts.total') }}</td>
+                    <td style="text-align:right; padding-right:10px;" class="text-lg">{{ $amount }}</td>
+                </tr>
+                 <tr>
+                    <td style="text-align:left; padding-right:10px;" class="text-lg">{{ ctrans('texts.balance') }}</td>
+                    <td style="text-align:right; padding-right:10px;" class="text-lg">{{ $balance }}</td>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+
+    @if(strlen($entity->public_notes) > 3)
+    <div x-data="{ show_notes: false }" class="mb-10 mr-5 ml-5 flex flex-col items-end">
+        
+        <button @click="show_notes = !show_notes" :aria-expanded="show_notes ? 'true' : 'false'" :class="{ 'active': show_notes }" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
+            <span>{{ ctrans('texts.notes') }}</span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
+        </button>
+        
+        <div id="notes" class="py-10 border-b-2 border-fuschia-600"  x-show="show_notes">     
+            {{ strip_tags($entity->public_notes) }}
+        </div>
+
+    </div>
+    @endif
+
+    @if(strlen($entity->terms) > 3)
+    <div x-data="{ show_terms: false }" class="mb-10 mr-5 ml-5 flex flex-col items-end">
+
+        <button @click="show_terms = !show_terms" :aria-expanded="show_terms ? 'true' : 'false'" :class="{ 'active': show_terms }" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
+            <span>{{ ctrans('texts.terms') }}</span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
+        </button>
+
+        <div id="terms" class="py-10 border-b-2 border-fuschia-600"  x-show="show_terms">
+            {{ strip_tags($entity->terms) }}
+        </div>
+
+    </div>
+    @endif
+
+    @if(strlen($entity->footer) > 3)
+    <div x-data="{ show_footer: false }" class="mb-10 mr-5 ml-5 flex flex-col items-end">
+
+        <button @click="show_footer = !show_footer" :aria-expanded="show_footer ? 'true' : 'false'" :class="{ 'active': show_footer }" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
+            <span>{{ ctrans('texts.footer') }}</span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
+        </button>
+
+        <div id="terms" class="py-10 border-b-2 border-fuschia-600"  x-show="show_footer">
+            {{ strip_tags($entity->footer) }}
+        </div>
+
+
+    </div>
+    @endif
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        
+        Array.from(document.getElementsByClassName("entity-field")).forEach(function(item) {
+            if(item.innerText.length == 0){
+                item.parentNode.remove();
+            }
+        });
+
+        Livewire.hook('message.processed', (message, component) => {
+
+            Array.from(document.getElementsByClassName("entity-field")).forEach(function(item) {
+                if(item.innerText.length == 0){
+                    item.parentNode.remove();
+                }
+            });
+
+        })
+        
+        var timeout = false; 
+        
+        /* Watch for resize of window and ensure we unset props with no values */
+        window.addEventListener('resize', function() {
+            clearTimeout(timeout);
+            timeout = setTimeout(getDimensions, 250);
+        });
+
+        getDimensions();
+
+        function getDimensions() {
+
+            const width = window.innerWidth;
+            
+            if(width < 900){
+            
+                Array.from(document.getElementsByClassName("entity-field")).forEach(function(item) {
+                    if(item.innerText.length == 0){
+                        item.parentNode.remove();
+                    }
+                });
+
+            }
+        }
+
+    });
+</script>
diff --git a/resources/views/portal/ninja2020/components/livewire/pdf-slot.blade.php b/resources/views/portal/ninja2020/components/livewire/pdf-slot.blade.php
index 05b2ef44b044..553b96d9bf8c 100644
--- a/resources/views/portal/ninja2020/components/livewire/pdf-slot.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/pdf-slot.blade.php
@@ -1,43 +1,63 @@
-<div wire:init="getPdf()">
-    @if($pdf)
-    <iframe id="pdf-iframe" src="{!! $pdf !!}" class="h-screen w-full border-0 mt-4"></iframe>
-    @else
-    <div class="flex mt-4 place-items-center">
-        <span class="loader m-auto"></span>
-        <style type="text/css">
-        .loader {
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        position: relative;
-        animation: rotate 1s linear infinite
-      }
-      .loader::before , .loader::after {
-        content: "";
-        box-sizing: border-box;
-        position: absolute;
-        inset: 0px;
-        border-radius: 50%;
-        border: 5px solid #454545;
-        animation: prixClipFix 2s linear infinite ;
-      }
-      .loader::after{
-        border-color: #FF3D00;
-        animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
-        inset: 6px;
-      }
-      @keyframes rotate {
-        0%   {transform: rotate(0deg)}
-        100%   {transform: rotate(360deg)}
-      }
-      @keyframes prixClipFix {
-          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-          25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-          75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
-          100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
-      }
-        </style>
-    </div>
-    @endif
+<div>
+<div class="flex flex-col items-end mb-2">
+  <button wire:loading.attr="disabled" wire:click="downloadPdf" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold px-2 rounded inline-flex">
+      <span>{{ ctrans('texts.download_pdf') }}</span>
+      <div wire:loading wire:target="downloadPdf">
+          <svg class="animate-spin h-5 w-5 text-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+
+      </div>
+  </button>
+</div>
+<div class="hidden lg:block">
+  <div wire:init="getPdf()">
+      @if($pdf)
+      <iframe id="pdf-iframe" src="{!! $pdf !!}" class="h-screen w-full border-0 mt-4"></iframe>
+      @else
+      <div class="flex mt-4 place-items-center">
+          <span class="loader m-auto"></span>
+          <style type="text/css">
+          .loader {
+          width: 48px;
+          height: 48px;
+          border-radius: 50%;
+          position: relative;
+          animation: rotate 1s linear infinite
+        }
+        .loader::before , .loader::after {
+          content: "";
+          box-sizing: border-box;
+          position: absolute;
+          inset: 0px;
+          border-radius: 50%;
+          border: 5px solid #454545;
+          animation: prixClipFix 2s linear infinite ;
+        }
+        .loader::after{
+          border-color: #FF3D00;
+          animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
+          inset: 6px;
+        }
+        @keyframes rotate {
+          0%   {transform: rotate(0deg)}
+          100%   {transform: rotate(360deg)}
+        }
+        @keyframes prixClipFix {
+            0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+            25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+            50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+            75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
+            100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
+        }
+          </style>
+      </div>
+      @endif
+  </div>
+</div>
+
+<div class="block lg:hidden">
+@include('portal.ninja2020.components.html-viewer')
+</div>
 </div>
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/components/pdf-viewer.blade.php b/resources/views/portal/ninja2020/components/pdf-viewer.blade.php
index bcf438c8de24..75008ab7e424 100644
--- a/resources/views/portal/ninja2020/components/pdf-viewer.blade.php
+++ b/resources/views/portal/ninja2020/components/pdf-viewer.blade.php
@@ -53,32 +53,6 @@
                 </svg>
             </a>
         </div>
-        <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>
-            </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 class="rounded-md bg-white ring-1 ring-black ring-opacity-5">
-                    <div class="py-1">
-                        <a target="_blank" href="{{ $fullscreen_url ?? '?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>
     </section>
 </div>