diff --git a/resources/lang/en/texts.php b/resources/lang/en/texts.php
index cd3b53d03dbf..22f2f6f1d2e8 100644
--- a/resources/lang/en/texts.php
+++ b/resources/lang/en/texts.php
@@ -3114,18 +3114,13 @@ $LANG = array(
     'cycles_remaining' => 'Cycles remaining',
     'i_understand_delete' => 'I understand, delete',
 
-
-
     'download_files' => 'Download Files',
     'download_timeframe' => 'Use this link to download your files, the link will expire in 1 hour.',
     'new_signup' => 'New Signup',
-    'new_signup_text' => 'A new account has been created by :user - :email - from IP address: :ip'
-
-
-
-
+    'new_signup_text' => 'A new account has been created by :user - :email - from IP address: :ip',
 
 
+    'email_link_not_working' => 'If button above isn\'t working for you, please click on the link',
 );
 
 return $LANG;
diff --git a/resources/views/email/components/button.blade.php b/resources/views/email/components/button.blade.php
index 95a82e4dbd27..2a836e71c0f5 100644
--- a/resources/views/email/components/button.blade.php
+++ b/resources/views/email/components/button.blade.php
@@ -1,5 +1,10 @@
-<a href="{{ $url }}" target="_blank">
-    <button class="text-white text-sm tracking-wide bg-blue-500 hover:bg-blue-600 hover:shadow rounded w-full my-8 p-4 uppercase">
-        {{ $slot }}
-    </button>
-</a>
\ No newline at end of file
+<div class="px-10 py-6 flex flex-col items-center">
+    <a href="{{ $url }}" class="bg-green-500 px-4 py-3 text-white leading-tight hover:bg-green-600" style="color: white !important;">{{ $slot }}</a>
+</div>
+
+@isset($show_link)
+<div class="flex flex-col">
+    <p>{{ ctrans('texts.email_link_not_working') }}:</p>
+    <a class="text-green-700 hover:text-green-800" href="{{ $url }}">{{ $url }}</a>
+</div>
+@endisset
\ No newline at end of file
diff --git a/resources/views/email/components/header.blade.php b/resources/views/email/components/header.blade.php
index ff5a6c4568d7..fbbf61602c2a 100644
--- a/resources/views/email/components/header.blade.php
+++ b/resources/views/email/components/header.blade.php
@@ -1,11 +1,15 @@
-<div class="h-64 flex flex-col items-center justify-center text-center tracking-wide leading-normal bg-gray-900 -mx-8 -mt-8 p-4">
-    @isset($image)
-        <img src="{{ $image }}" alt="@isset($image_alt) {{ $image_alt }} @endisset">
-    @endisset    
-    <h1 class="text-white text-4xl font-semibold">{{ $slot }}</h1>
-    <p class="text-white text-xl">
-        @isset($p)
-            {{ $p }}
-        @endisset   
-    </p>
+<div id="header" class="border-b {{ isset($logo) ? 'p-6' : '' }} flex justify-center">
+    @isset($logo)
+        <img src="{{ $logo }}" style="height: 3rem;">
+    @endisset
+</div>
+
+<div class="flex flex-col items-center mt-8 mb-4">
+    <svg class="h-32" id="060e19aa-3f7d-4f07-aa7e-820f8d371f55" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="870.71" height="691.21" viewBox="0 0 870.71 691.21" class="injected-svg gridItem__media"><defs><linearGradient id="96d5bb21-1965-4d3e-ab37-1bcc7be514e6-100" x1="309.27" y1="560.72" x2="309.27" y2="406.06" gradientTransform="matrix(-1, 0, 0, 1, 616.6, 82.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"></stop><stop offset="0.54" stop-color="gray" stop-opacity="0.12"></stop><stop offset="1" stop-color="gray" stop-opacity="0.1"></stop></linearGradient><linearGradient id="3608cfbe-4e57-42c8-8a3e-2b99e6b6c6a0-101" x1="-175.29" y1="157.73" x2="-175.29" y2="3.07" gradientTransform="matrix(0, -1, -1, 0, 970.73, 29.07)" xlink:href="#96d5bb21-1965-4d3e-ab37-1bcc7be514e6-100"></linearGradient><linearGradient id="f4d6b150-3892-4d6f-bed9-22612cc59583-102" x1="-246.29" y1="456.25" x2="-246.29" y2="301.59" gradientTransform="matrix(0, -1, -1, 0, 1293.26, 304.09)" xlink:href="#96d5bb21-1965-4d3e-ab37-1bcc7be514e6-100"></linearGradient><linearGradient id="675c2575-69c8-4c08-9859-0530d9a94ad2-103" x1="60" y1="226.17" x2="60" y2="71.51" gradientTransform="matrix(-1, 0, 0, 1, 436.24, 71.59)" xlink:href="#96d5bb21-1965-4d3e-ab37-1bcc7be514e6-100"></linearGradient><linearGradient id="245258be-8ef2-4163-b815-3fbd211fc334-104" x1="435.66" y1="691.21" x2="435.66" y2="9.21" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#96d5bb21-1965-4d3e-ab37-1bcc7be514e6-100"></linearGradient><linearGradient id="afb36fd3-f298-4117-ba9e-9f0c6a4eccfc-105" x1="435.66" y1="544.71" x2="435.66" y2="69.59" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#96d5bb21-1965-4d3e-ab37-1bcc7be514e6-100"></linearGradient><linearGradient id="9b46ec67-d0ea-45ff-80f1-fe3db7b86030-106" x1="600.3" y1="786.69" x2="600.3" y2="565.96" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#96d5bb21-1965-4d3e-ab37-1bcc7be514e6-100"></linearGradient></defs><title>opened</title><rect x="181.5" y="488.34" width="251.66" height="154.66" transform="translate(-313.48 7.02) rotate(-16.6)" fill="url(#96d5bb21-1965-4d3e-ab37-1bcc7be514e6-100)"></rect><rect x="184.26" y="492.57" width="243.13" height="144.34" transform="translate(-313.28 6.55) rotate(-16.6)" fill="#fff"></rect><g opacity="0.6"><rect x="184.56" y="532.96" width="30.93" height="22.89" transform="translate(382.63 904.55) rotate(163.4)" fill="#f55f44"></rect><rect x="221.97" y="570.99" width="118.78" height="7.42" transform="translate(550.57 940.64) rotate(163.4)" fill="#f55f44"></rect><rect x="258.42" y="584.23" width="86.61" height="4.95" transform="translate(593.88 958.32) rotate(163.4)" fill="#f55f44"></rect></g><rect x="812.99" y="78.53" width="154.66" height="251.66" transform="translate(354.91 934.8) rotate(-78.98)" fill="url(#3608cfbe-4e57-42c8-8a3e-2b99e6b6c6a0-101)"></rect><rect x="817.25" y="81.28" width="144.34" height="243.13" transform="translate(355.66 932.7) rotate(-78.98)" fill="#fff"></rect><g opacity="0.6"><rect x="789.65" y="124.32" width="30.93" height="22.89" transform="translate(1404.78 318.52) rotate(-168.98)" fill="#f55f44"></rect><rect x="803.74" y="196.61" width="118.78" height="7.42" transform="translate(1507.41 457.54) rotate(-168.98)" fill="#f55f44"></rect><rect x="832.3" y="217.92" width="86.61" height="4.95" transform="translate(1528.3 499.71) rotate(-168.98)" fill="#f55f44"></rect></g><rect x="837.01" y="424.55" width="154.66" height="251.66" transform="translate(-308.14 304.89) rotate(-23.45)" fill="url(#f4d6b150-3892-4d6f-bed9-22612cc59583-102)"></rect><rect x="842.9" y="427.21" width="144.34" height="243.13" transform="translate(-307.45 305.05) rotate(-23.45)" fill="#fff"></rect><g opacity="0.6"><rect x="907.2" y="429.86" width="30.93" height="22.89" transform="translate(720.31 1358.98) rotate(-113.45)" fill="#47e6b1"></rect><rect x="842.89" y="521.96" width="118.78" height="7.42" transform="translate(614.41 1458.22) rotate(-113.45)" fill="#47e6b1"></rect><rect x="849.48" y="544.85" width="86.61" height="4.95" transform="translate(581.28 1479.77) rotate(-113.45)" fill="#47e6b1"></rect></g><rect x="250.41" y="143.1" width="251.66" height="154.66" transform="translate(-216.69 34.06) rotate(-19.53)" fill="url(#675c2575-69c8-4c08-9859-0530d9a94ad2-103)"></rect><rect x="253.13" y="147.42" width="243.13" height="144.34" transform="translate(-216.5 33.5) rotate(-19.53)" fill="#fff"></rect><g opacity="0.6"><rect x="252.52" y="193.23" width="30.93" height="22.89" transform="translate(424.33 203.59) rotate(160.47)" fill="#000000"></rect><rect x="291.38" y="227.07" width="118.78" height="7.42" transform="translate(593.86 226.63) rotate(160.47)" fill="#000000"></rect><rect x="328.41" y="239.26" width="86.61" height="4.95" transform="translate(638.21 240.89) rotate(160.47)" fill="#000000"></rect></g><polygon points="435.66 9.21 142.66 285.04 142.66 691.21 728.65 691.21 728.65 285.04 435.66 9.21" fill="url(#245258be-8ef2-4163-b815-3fbd211fc334-104)"></polygon><polygon points="725.68 682.3 145.63 682.3 145.63 284.38 435.66 14.16 725.68 284.38 725.68 682.3" fill="#fff"></polygon><rect x="233.73" y="69.59" width="403.85" height="475.12" fill="url(#afb36fd3-f298-4117-ba9e-9f0c6a4eccfc-105)"></rect><rect x="238.83" y="73.55" width="393.65" height="471.16" fill="#fff"></rect><polygon points="145.63 284.38 435.66 483.34 145.63 682.3 145.63 284.38" fill="#f5f5f5"></polygon><polygon points="725.68 284.38 435.66 483.34 725.68 682.3 725.68 284.38" fill="#f5f5f5"></polygon><path d="M310.28,786.69,588.92,569.9a18.39,18.39,0,0,1,22.75,0L890.33,786.69Z" transform="translate(-164.65 -104.4)" fill="url(#9b46ec67-d0ea-45ff-80f1-fe3db7b86030-106)"></path><path d="M310.28,786.69,588.92,579.37a19.06,19.06,0,0,1,22.75,0L890.33,786.69Z" transform="translate(-164.65 -104.4)" fill="#fff"></path><rect x="298.56" y="164.61" width="82.16" height="13.86" fill="#47e6b1"></rect><rect x="298.56" y="201.24" width="274.19" height="13.86" fill="#f5f5f5"></rect><rect x="298.56" y="224.99" width="274.19" height="13.86" fill="#f5f5f5"></rect><rect x="298.56" y="248.75" width="274.19" height="13.86" fill="#f5f5f5"></rect><rect x="298.56" y="272.5" width="274.19" height="13.86" fill="#f5f5f5"></rect><rect x="298.56" y="296.26" width="124.72" height="13.86" fill="#f5f5f5"></rect><rect x="448.03" y="296.26" width="124.72" height="13.86" fill="#000000"></rect></svg>
+    <h1 id="title" class="text-2xl md:text-3xl mt-5">
+        {{ $slot }}
+    </h1>
+    @isset($p)
+        <p>{{ $p }}</p>
+    @endisset
 </div>
\ No newline at end of file
diff --git a/resources/views/email/components/layout-dark.blade.php b/resources/views/email/components/layout-dark.blade.php
deleted file mode 100644
index a8d2a7f4535f..000000000000
--- a/resources/views/email/components/layout-dark.blade.php
+++ /dev/null
@@ -1,498 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-</head>
-
-<style>
-    html {
-        line-height: 1.15;
-        -webkit-text-size-adjust: 100%
-    }
-
-    body {
-        margin: 0
-    }
-
-    main {
-        display: block
-    }
-
-    h1 {
-        font-size: 2em;
-        margin: .67em 0
-    }
-
-    a {
-        background-color: transparent
-    }
-
-    strong {
-        font-weight: bolder
-    }
-
-    button,
-    input {
-        font-family: inherit;
-        font-size: 100%;
-        line-height: 1.15;
-        margin: 0;
-        overflow: visible
-    }
-
-    button {
-        text-transform: none
-    }
-
-    [type=button],
-    [type=reset],
-    [type=submit],
-    button {
-        -webkit-appearance: button
-    }
-
-    [type=button]::-moz-focus-inner,
-    [type=reset]::-moz-focus-inner,
-    [type=submit]::-moz-focus-inner,
-    button::-moz-focus-inner {
-        border-style: none;
-        padding: 0
-    }
-
-    [type=button]:-moz-focusring,
-    [type=reset]:-moz-focusring,
-    [type=submit]:-moz-focusring,
-    button:-moz-focusring {
-        outline: 1px dotted ButtonText
-    }
-
-    legend {
-        color: inherit;
-        display: table;
-        max-width: 100%;
-        white-space: normal
-    }
-
-    [type=checkbox],
-    [type=radio],
-    legend {
-        box-sizing: border-box;
-        padding: 0
-    }
-
-    [type=number]::-webkit-inner-spin-button,
-    [type=number]::-webkit-outer-spin-button {
-        height: auto
-    }
-
-    [type=search] {
-        -webkit-appearance: textfield;
-        outline-offset: -2px
-    }
-
-    [type=search]::-webkit-search-decoration {
-        -webkit-appearance: none
-    }
-
-    ::-webkit-file-upload-button {
-        -webkit-appearance: button;
-        font: inherit
-    }
-
-    [hidden] {
-        display: none
-    }
-
-    h1,
-    h3,
-    p {
-        margin: 0
-    }
-
-    button {
-        background-color: transparent;
-        background-image: none;
-        padding: 0
-    }
-
-    button:focus {
-        outline: 1px dotted;
-        outline: 5px auto -webkit-focus-ring-color
-    }
-
-    html {
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-        line-height: 1.5
-    }
-
-    *,
-    :after,
-    :before {
-        box-sizing: border-box;
-        border: 0 solid #e2e8f0
-    }
-
-    input::-webkit-input-placeholder {
-        color: #a0aec0
-    }
-
-    input::-moz-placeholder {
-        color: #a0aec0
-    }
-
-    input:-ms-input-placeholder {
-        color: #a0aec0
-    }
-
-    input::-ms-input-placeholder {
-        color: #a0aec0
-    }
-
-    input::placeholder {
-        color: #a0aec0
-    }
-
-    [role=button],
-    button {
-        cursor: pointer
-    }
-
-    table {
-        border-collapse: collapse
-    }
-
-    h1,
-    h3 {
-        font-size: inherit;
-        font-weight: inherit
-    }
-
-    a {
-        color: inherit;
-        text-decoration: inherit
-    }
-
-    button,
-    input {
-        padding: 0;
-        line-height: inherit;
-        color: inherit
-    }
-
-    canvas,
-    object {
-        display: block;
-        vertical-align: middle
-    }
-
-    .bg-white {
-        background-color: #fff
-    }
-
-    .bg-gray-100 {
-        background-color: #f7fafc
-    }
-
-    .bg-gray-200 {
-        background-color: #edf2f7
-    }
-
-    .bg-gray-800 {
-        background-color: #2d3748
-    }
-
-    .bg-gray-900 {
-        background-color: #1a202c
-    }
-
-    .bg-blue-500 {
-        background-color: #4299e1
-    }
-
-    .bg-blue-600 {
-        background-color: #3182ce
-    }
-
-    .bg-blue-700 {
-        background-color: #2b6cb0
-    }
-
-    .bg-blue-800 {
-        background-color: #2c5282
-    }
-
-    .bg-blue-900 {
-        background-color: #2a4365
-    }
-
-    .hover\:bg-blue-600:hover {
-        background-color: #3182ce
-    }
-
-    .hover\:bg-blue-700:hover {
-        background-color: #2b6cb0
-    }
-
-    .border-blue-100 {
-        border-color: #ebf8ff
-    }
-
-    .border-blue-800 {
-        border-color: #2c5282
-    }
-
-    .rounded {
-        border-radius: .25rem
-    }
-
-    .border {
-        border-width: 1px
-    }
-
-    .border-b {
-        border-bottom-width: 1px
-    }
-
-    .flex {
-        display: flex
-    }
-
-    .table {
-        display: table
-    }
-
-    .flex-col {
-        flex-direction: column
-    }
-
-    .items-center {
-        align-items: center
-    }
-
-    .justify-center {
-        justify-content: center
-    }
-
-    .font-sans {
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
-    }
-
-    .font-semibold {
-        font-weight: 600
-    }
-
-    .h-64 {
-        height: 16rem
-    }
-
-    .leading-normal {
-        line-height: 1.5
-    }
-
-    .leading-loose {
-        line-height: 2
-    }
-
-    .my-8 {
-        margin-top: 2rem;
-        margin-bottom: 2rem
-    }
-
-    .mx-auto {
-        margin-left: auto;
-        margin-right: auto
-    }
-
-    .-mx-8 {
-        margin-left: -2rem;
-        margin-right: -2rem
-    }
-
-    .mt-4 {
-        margin-top: 1rem
-    }
-
-    .mt-8 {
-        margin-top: 2rem
-    }
-
-    .mb-8 {
-        margin-bottom: 2rem
-    }
-
-    .-mt-8 {
-        margin-top: -2rem
-    }
-
-    .max-w-md {
-        max-width: 28rem
-    }
-
-    .min-h-screen {
-        min-height: 100vh
-    }
-
-    .p-1 {
-        padding: .25rem
-    }
-
-    .p-4 {
-        padding: 1rem
-    }
-
-    .p-8 {
-        padding: 2rem
-    }
-
-    .py-2 {
-        padding-top: .5rem;
-        padding-bottom: .5rem
-    }
-
-    .px-4 {
-        padding-left: 1rem;
-        padding-right: 1rem
-    }
-
-    .py-8 {
-        padding-top: 2rem;
-        padding-bottom: 2rem
-    }
-
-    .static {
-        position: static
-    }
-
-    .hover\:shadow:hover,
-    .shadow {
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
-    }
-
-    .table-auto {
-        table-layout: auto
-    }
-
-    .text-left {
-        text-align: left
-    }
-
-    .text-center {
-        text-align: center
-    }
-
-    .text-white {
-        color: #fff
-    }
-
-    .text-gray-200 {
-        color: #edf2f7
-    }
-
-    .text-gray-700 {
-        color: #4a5568
-    }
-
-    .text-blue-500 {
-        color: #4299e1
-    }
-
-    .hover\:text-blue-600:hover {
-        color: #3182ce
-    }
-
-    .text-sm {
-        font-size: .875rem
-    }
-
-    .text-base {
-        font-size: 1rem
-    }
-
-    .text-xl {
-        font-size: 1.25rem
-    }
-
-    .text-4xl {
-        font-size: 2.25rem
-    }
-
-    .uppercase {
-        text-transform: uppercase
-    }
-
-    .underline {
-        text-decoration: underline
-    }
-
-    .antialiased {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale
-    }
-
-    .tracking-wide {
-        letter-spacing: .025em
-    }
-
-    .w-full {
-        width: 100%
-    }
-
-    @media (min-width:640px) {
-        .sm\:text-lg {
-            font-size: 1.125rem
-        }
-    }
-</style>
-
-<body class="antialiased font-sans bg-gray-800">
-    <div class="app font-sans min-w-screen min-h-screen bg-grey-lighter py-8 px-4">
-
-        <div class="max-w-md mx-auto">
-
-            <div class="bg-white p-8 shadow">
-
-                {{ $header }}
-
-                <div class="py-8 border-b">
-                    
-                    @isset($greeting) 
-                        {{ $greeting }} 
-                    @endisset
-
-                    <div class="mt-4">
-                        {{ $slot }}
-                    </div>
-
-                    @isset($signature)
-                    <p class="text-sm">Sincerely,</p>
-                    <p class="text-sm">{{ $signature }}</p>
-                    @endisset
-
-                </div>
-
-                @isset($footer)
-                    {{ $footer }}
-                @endisset
-
-            </div>
-
-            <div class="text-center text-sm mt-8">
-
-                <div class="meta__help">
-                    @isset($below_card)
-                        {!! $below_card !!}
-                    @endisset
-                </div>
-
-            </div>
-
-
-        </div>
-
-    </div>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/resources/views/email/components/layout.blade.php b/resources/views/email/components/layout.blade.php
deleted file mode 100644
index c66252eb9a0e..000000000000
--- a/resources/views/email/components/layout.blade.php
+++ /dev/null
@@ -1,498 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-</head>
-
-<style>
-    html {
-        line-height: 1.15;
-        -webkit-text-size-adjust: 100%
-    }
-
-    body {
-        margin: 0
-    }
-
-    main {
-        display: block
-    }
-
-    h1 {
-        font-size: 2em;
-        margin: .67em 0
-    }
-
-    a {
-        background-color: transparent
-    }
-
-    strong {
-        font-weight: bolder
-    }
-
-    button,
-    input {
-        font-family: inherit;
-        font-size: 100%;
-        line-height: 1.15;
-        margin: 0;
-        overflow: visible
-    }
-
-    button {
-        text-transform: none
-    }
-
-    [type=button],
-    [type=reset],
-    [type=submit],
-    button {
-        -webkit-appearance: button
-    }
-
-    [type=button]::-moz-focus-inner,
-    [type=reset]::-moz-focus-inner,
-    [type=submit]::-moz-focus-inner,
-    button::-moz-focus-inner {
-        border-style: none;
-        padding: 0
-    }
-
-    [type=button]:-moz-focusring,
-    [type=reset]:-moz-focusring,
-    [type=submit]:-moz-focusring,
-    button:-moz-focusring {
-        outline: 1px dotted ButtonText
-    }
-
-    legend {
-        color: inherit;
-        display: table;
-        max-width: 100%;
-        white-space: normal
-    }
-
-    [type=checkbox],
-    [type=radio],
-    legend {
-        box-sizing: border-box;
-        padding: 0
-    }
-
-    [type=number]::-webkit-inner-spin-button,
-    [type=number]::-webkit-outer-spin-button {
-        height: auto
-    }
-
-    [type=search] {
-        -webkit-appearance: textfield;
-        outline-offset: -2px
-    }
-
-    [type=search]::-webkit-search-decoration {
-        -webkit-appearance: none
-    }
-
-    ::-webkit-file-upload-button {
-        -webkit-appearance: button;
-        font: inherit
-    }
-
-    [hidden] {
-        display: none
-    }
-
-    h1,
-    h3,
-    p {
-        margin: 0
-    }
-
-    button {
-        background-color: transparent;
-        background-image: none;
-        padding: 0
-    }
-
-    button:focus {
-        outline: 1px dotted;
-        outline: 5px auto -webkit-focus-ring-color
-    }
-
-    html {
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-        line-height: 1.5
-    }
-
-    *,
-    :after,
-    :before {
-        box-sizing: border-box;
-        border: 0 solid #e2e8f0
-    }
-
-    input::-webkit-input-placeholder {
-        color: #a0aec0
-    }
-
-    input::-moz-placeholder {
-        color: #a0aec0
-    }
-
-    input:-ms-input-placeholder {
-        color: #a0aec0
-    }
-
-    input::-ms-input-placeholder {
-        color: #a0aec0
-    }
-
-    input::placeholder {
-        color: #a0aec0
-    }
-
-    [role=button],
-    button {
-        cursor: pointer
-    }
-
-    table {
-        border-collapse: collapse
-    }
-
-    h1,
-    h3 {
-        font-size: inherit;
-        font-weight: inherit
-    }
-
-    a {
-        color: inherit;
-        text-decoration: inherit
-    }
-
-    button,
-    input {
-        padding: 0;
-        line-height: inherit;
-        color: inherit
-    }
-
-    canvas,
-    object {
-        display: block;
-        vertical-align: middle
-    }
-
-    .bg-white {
-        background-color: #fff
-    }
-
-    .bg-gray-100 {
-        background-color: #f7fafc
-    }
-
-    .bg-gray-200 {
-        background-color: #edf2f7
-    }
-
-    .bg-gray-800 {
-        background-color: #2d3748
-    }
-
-    .bg-gray-900 {
-        background-color: #1a202c
-    }
-
-    .bg-blue-500 {
-        background-color: #4299e1
-    }
-
-    .bg-blue-600 {
-        background-color: #3182ce
-    }
-
-    .bg-blue-700 {
-        background-color: #2b6cb0
-    }
-
-    .bg-blue-800 {
-        background-color: #2c5282
-    }
-
-    .bg-blue-900 {
-        background-color: #2a4365
-    }
-
-    .hover\:bg-blue-600:hover {
-        background-color: #3182ce
-    }
-
-    .hover\:bg-blue-700:hover {
-        background-color: #2b6cb0
-    }
-
-    .border-blue-100 {
-        border-color: #ebf8ff
-    }
-
-    .border-blue-800 {
-        border-color: #2c5282
-    }
-
-    .rounded {
-        border-radius: .25rem
-    }
-
-    .border {
-        border-width: 1px
-    }
-
-    .border-b {
-        border-bottom-width: 1px
-    }
-
-    .flex {
-        display: flex
-    }
-
-    .table {
-        display: table
-    }
-
-    .flex-col {
-        flex-direction: column
-    }
-
-    .items-center {
-        align-items: center
-    }
-
-    .justify-center {
-        justify-content: center
-    }
-
-    .font-sans {
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
-    }
-
-    .font-semibold {
-        font-weight: 600
-    }
-
-    .h-64 {
-        height: 16rem
-    }
-
-    .leading-normal {
-        line-height: 1.5
-    }
-
-    .leading-loose {
-        line-height: 2
-    }
-
-    .my-8 {
-        margin-top: 2rem;
-        margin-bottom: 2rem
-    }
-
-    .mx-auto {
-        margin-left: auto;
-        margin-right: auto
-    }
-
-    .-mx-8 {
-        margin-left: -2rem;
-        margin-right: -2rem
-    }
-
-    .mt-4 {
-        margin-top: 1rem
-    }
-
-    .mt-8 {
-        margin-top: 2rem
-    }
-
-    .mb-8 {
-        margin-bottom: 2rem
-    }
-
-    .-mt-8 {
-        margin-top: -2rem
-    }
-
-    .max-w-md {
-        max-width: 28rem
-    }
-
-    .min-h-screen {
-        min-height: 100vh
-    }
-
-    .p-1 {
-        padding: .25rem
-    }
-
-    .p-4 {
-        padding: 1rem
-    }
-
-    .p-8 {
-        padding: 2rem
-    }
-
-    .py-2 {
-        padding-top: .5rem;
-        padding-bottom: .5rem
-    }
-
-    .px-4 {
-        padding-left: 1rem;
-        padding-right: 1rem
-    }
-
-    .py-8 {
-        padding-top: 2rem;
-        padding-bottom: 2rem
-    }
-
-    .static {
-        position: static
-    }
-
-    .hover\:shadow:hover,
-    .shadow {
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
-    }
-
-    .table-auto {
-        table-layout: auto
-    }
-
-    .text-left {
-        text-align: left
-    }
-
-    .text-center {
-        text-align: center
-    }
-
-    .text-white {
-        color: #fff
-    }
-
-    .text-gray-200 {
-        color: #edf2f7
-    }
-
-    .text-gray-700 {
-        color: #4a5568
-    }
-
-    .text-blue-500 {
-        color: #4299e1
-    }
-
-    .hover\:text-blue-600:hover {
-        color: #3182ce
-    }
-
-    .text-sm {
-        font-size: .875rem
-    }
-
-    .text-base {
-        font-size: 1rem
-    }
-
-    .text-xl {
-        font-size: 1.25rem
-    }
-
-    .text-4xl {
-        font-size: 2.25rem
-    }
-
-    .uppercase {
-        text-transform: uppercase
-    }
-
-    .underline {
-        text-decoration: underline
-    }
-
-    .antialiased {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale
-    }
-
-    .tracking-wide {
-        letter-spacing: .025em
-    }
-
-    .w-full {
-        width: 100%
-    }
-
-    @media (min-width:640px) {
-        .sm\:text-lg {
-            font-size: 1.125rem
-        }
-    }
-</style>
-
-<body class="antialiased font-sans bg-gray-200">
-    <div class="app font-sans min-w-screen min-h-screen bg-grey-lighter py-8 px-4">
-
-        <div class="max-w-md mx-auto">
-
-            <div class="bg-white p-8 shadow">
-
-                {{ $header }}
-
-                <div class="py-8 border-b">
-                    
-                    @isset($greeting) 
-                        {{ $greeting }} 
-                    @endisset
-
-                    <div class="mt-4">
-                        {{ $slot }}
-                    </div>
-
-                    @isset($signature)
-                    <p class="text-sm">Sincerely,</p>
-                    <p class="text-sm">{{ $signature }}</p>
-                    @endisset
-
-                </div>
-
-                @isset($footer)
-                    {{ $footer }}
-                @endisset
-
-            </div>
-
-            <div class="text-center text-sm mt-8">
-
-                <div class="meta__help">
-                    @isset($below_card)
-                        {!! $below_card !!}
-                    @endisset
-                </div>
-
-            </div>
-
-
-        </div>
-
-    </div>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/resources/views/email/example.blade.php b/resources/views/email/example.blade.php
index b8c8e88ec08d..c584fd312f11 100644
--- a/resources/views/email/example.blade.php
+++ b/resources/views/email/example.blade.php
@@ -1,12 +1,7 @@
-{{-- @if()
-        @component('email.components.layout-dark')
-    @endif
---}}
-
-@component('email.components.layout')
+@component('email.template.master', ['design' => 'light'])
 
 @slot('header')
-    @component('email.components.header', ['p' => 'Your upgrade has completed!', 'image' => 'https://www.invoiceninja.com/wp-content/uploads/2019/01/InvoiceNinja-Logo-Round-300x300.png'])
+    @component('email.components.header', ['p' => 'Your upgrade has completed!', 'logo' => 'https://www.invoiceninja.com/wp-content/uploads/2019/01/InvoiceNinja-Logo-Round-300x300.png'])
         Upgrade!
     @endcomponent
 
@@ -18,7 +13,7 @@
 
 Hello, this is really tiny template. We just want to inform you that upgrade has been completed.
 
-@component('email.components.button', ['url' => 'https://invoiceninja.com'])
+@component('email.components.button', ['url' => 'https://invoiceninja.com', 'show_link' => true])
     Visit InvoiceNinja
 @endcomponent
 
diff --git a/resources/views/email/template/master.blade.php b/resources/views/email/template/master.blade.php
index 78ca09f2e27b..132ee44692f5 100644
--- a/resources/views/email/template/master.blade.php
+++ b/resources/views/email/template/master.blade.php
@@ -1,342 +1,52 @@
-<!doctype html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width" />
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <title>@yield('title')</title>
-    <style>
-      /* -------------------------------------
-          GLOBAL RESETS
-      ------------------------------------- */
-      
-      /*All the styling goes here*/
-      
-      img {
-        border: none;
-        -ms-interpolation-mode: bicubic;
-        max-width: 100%; 
-      }
-      body {
-        background-color: #f6f6f6;
-        font-family: sans-serif;
-        -webkit-font-smoothing: antialiased;
-        font-size: 14px;
-        line-height: 1.4;
-        margin: 0;
-        padding: 0;
-        -ms-text-size-adjust: 100%;
-        -webkit-text-size-adjust: 100%; 
-      }
-      table {
-        border-collapse: separate;
-        mso-table-lspace: 0pt;
-        mso-table-rspace: 0pt;
-        width: 100%; }
-        table td {
-          font-family: sans-serif;
-          font-size: 14px;
-          vertical-align: top; 
-      }
-      /* -------------------------------------
-          BODY & CONTAINER
-      ------------------------------------- */
-      .body {
-        background-color: #f6f6f6;
-        width: 100%; 
-      }
-      /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
-      .container {
-        display: block;
-        margin: 0 auto !important;
-        /* makes it centered */
-        max-width: 580px;
-        padding: 10px;
-        width: 580px; 
-      }
-      /* This should also be a block element, so that it will fill 100% of the .container */
-      .content {
-        box-sizing: border-box;
-        display: block;
-        margin: 0 auto;
-        max-width: 580px;
-        padding: 10px; 
-      }
-      /* -------------------------------------
-          HEADER, FOOTER, MAIN
-      ------------------------------------- */
-      .main {
-        background: #ffffff;
-        border-radius: 3px;
-        width: 100%; 
-      }
-      .wrapper {
-        box-sizing: border-box;
-        padding: 20px; 
-      }
-      .content-block {
-        padding-bottom: 10px;
-        padding-top: 10px;
-      }
-      .footer {
-        clear: both;
-        margin-top: 10px;
-        text-align: center;
-        width: 100%; 
-      }
-        .footer td,
-        .footer p,
-        .footer span,
-        .footer a {
-          color: #999999;
-          font-size: 12px;
-          text-align: center; 
-      }
-      /* -------------------------------------
-          TYPOGRAPHY
-      ------------------------------------- */
-      h1,
-      h2,
-      h3,
-      h4 {
-        color: #000000;
-        font-family: sans-serif;
-        font-weight: 400;
-        line-height: 1.4;
-        margin: 0;
-        margin-bottom: 30px; 
-      }
-      h1 {
-        font-size: 35px;
-        font-weight: 300;
-        text-align: center;
-        text-transform: capitalize; 
-      }
-      p,
-      ul,
-      ol {
-        font-family: sans-serif;
-        font-size: 14px;
-        font-weight: normal;
-        margin: 0;
-        margin-bottom: 15px; 
-      }
-        p li,
-        ul li,
-        ol li {
-          list-style-position: inside;
-          margin-left: 5px; 
-      }
-      a {
-        color: #3498db;
-        text-decoration: underline; 
-      }
-      /* -------------------------------------
-          BUTTONS
-      ------------------------------------- */
-      .btn {
-        box-sizing: border-box;
-        width: 100%; }
-        .btn > tbody > tr > td {
-          padding-bottom: 15px; }
-        .btn table {
-          width: auto; 
-      }
-        .btn table td {
-          background-color: #ffffff;
-          border-radius: 5px;
-          text-align: center; 
-      }
-        .btn a {
-          background-color: #ffffff;
-          border: solid 1px #3498db;
-          border-radius: 5px;
-          box-sizing: border-box;
-          color: #3498db;
-          cursor: pointer;
-          display: inline-block;
-          font-size: 14px;
-          font-weight: bold;
-          margin: 0;
-          padding: 12px 25px;
-          text-decoration: none;
-          text-transform: capitalize; 
-      }
-      .btn-primary table td {
-        background-color: #3498db; 
-      }
-      .btn-primary a {
-        background-color: #3498db;
-        border-color: #3498db;
-        color: #ffffff; 
-      }
-      /* -------------------------------------
-          OTHER STYLES THAT MIGHT BE USEFUL
-      ------------------------------------- */
-      .last {
-        margin-bottom: 0; 
-      }
-      .first {
-        margin-top: 0; 
-      }
-      .align-center {
-        text-align: center; 
-      }
-      .align-right {
-        text-align: right; 
-      }
-      .align-left {
-        text-align: left; 
-      }
-      .clear {
-        clear: both; 
-      }
-      .mt0 {
-        margin-top: 0; 
-      }
-      .mb0 {
-        margin-bottom: 0; 
-      }
-      .preheader {
-        color: transparent;
-        display: none;
-        height: 0;
-        max-height: 0;
-        max-width: 0;
-        opacity: 0;
-        overflow: hidden;
-        mso-hide: all;
-        visibility: hidden;
-        width: 0; 
-      }
-      .powered-by a {
-        text-decoration: none; 
-      }
-      hr {
-        border: 0;
-        border-bottom: 1px solid #f6f6f6;
-        margin: 20px 0; 
-      }
-      /* -------------------------------------
-          RESPONSIVE AND MOBILE FRIENDLY STYLES
-      ------------------------------------- */
-      @media only screen and (max-width: 620px) {
-        table[class=body] h1 {
-          font-size: 28px !important;
-          margin-bottom: 10px !important; 
-        }
-        table[class=body] p,
-        table[class=body] ul,
-        table[class=body] ol,
-        table[class=body] td,
-        table[class=body] span,
-        table[class=body] a {
-          font-size: 16px !important; 
-        }
-        table[class=body] .wrapper,
-        table[class=body] .article {
-          padding: 10px !important; 
-        }
-        table[class=body] .content {
-          padding: 0 !important; 
-        }
-        table[class=body] .container {
-          padding: 0 !important;
-          width: 100% !important; 
-        }
-        table[class=body] .main {
-          border-left-width: 0 !important;
-          border-radius: 0 !important;
-          border-right-width: 0 !important; 
-        }
-        table[class=body] .btn table {
-          width: 100% !important; 
-        }
-        table[class=body] .btn a {
-          width: 100% !important; 
-        }
-        table[class=body] .img-responsive {
-          height: auto !important;
-          max-width: 100% !important;
-          width: auto !important; 
-        }
-      }
-      /* -------------------------------------
-          PRESERVE THESE STYLES IN THE HEAD
-      ------------------------------------- */
-      @media all {
-        .ExternalClass {
-          width: 100%; 
-        }
-        .ExternalClass,
-        .ExternalClass p,
-        .ExternalClass span,
-        .ExternalClass font,
-        .ExternalClass td,
-        .ExternalClass div {
-          line-height: 100%; 
-        }
-        .apple-link a {
-          color: inherit !important;
-          font-family: inherit !important;
-          font-size: inherit !important;
-          font-weight: inherit !important;
-          line-height: inherit !important;
-          text-decoration: none !important; 
-        }
-        #MessageViewBody a {
-          color: inherit;
-          text-decoration: none;
-          font-size: inherit;
-          font-family: inherit;
-          font-weight: inherit;
-          line-height: inherit;
-        }
-        .btn-primary table td:hover {
-          background-color: #34495e !important; 
-        }
-        .btn-primary a:hover {
-          background-color: #34495e !important;
-          border-color: #34495e !important; 
-        } 
-      }
-    </style>
-  </head>
-  <body class="">
-    <span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
-    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
-      <tr>
-        <td>@include('email.partials.company_logo')</td>
-      </tr>
-      <tr>
-        <td>&nbsp;</td>
-        <td class="container">
-          <div class="content">
+@php
+  if(!isset($design)) 
+    $design = 'light';
+@endphp
 
-            @yield('content')
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@yield('title')</title>
+  <style>
+  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}a{background-color:transparent}img{border-style:none}button{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[hidden]{display:none}h1,p{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}img{border-style:solid}[role=button],button{cursor:pointer}h1{font-size:inherit;font-weight:inherit}a{text-decoration:inherit}a,button{color:inherit}button{padding:0;line-height:inherit}img,object,svg{display:block;vertical-align:middle}img{max-width:100%;height:auto}.bg-white{background-color:#fff}.bg-gray-200{background-color:#edf2f7}.bg-gray-800{background-color:#2d3748}.bg-gray-900{background-color:#1a202c}.bg-green-500{background-color:#48bb78}.bg-blue-500{background-color:#4299e1}.bg-blue-700{background-color:#2b6cb0}.bg-blue-900{background-color:#2a4365}.hover\:bg-green-600:hover{background-color:#38a169}.hover\:bg-blue-600:hover{background-color:#3182ce}.border-gray-800{border-color:#2d3748}.border-green-500{border-color:#48bb78}.border-blue-500{border-color:#4299e1}.rounded-lg{border-radius:.5rem}.border-t-2{border-top-width:2px}.border-b{border-bottom-width:1px}.flex{display:flex}.grid{display:grid}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.font-sans{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.h-6{height:1.5rem}.h-32{height:8rem}.leading-tight{line-height:1.25}.my-4{margin-top:1rem;margin-bottom:1rem}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem}.mt-10{margin-top:2.5rem}.p-6{padding:1.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.static{position:static}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-white{color:#fff}.text-gray-400{color:#cbd5e0}.text-gray-700{color:#4a5568}.text-green-700{color:#2f855a}.hover\:text-green-800:hover{color:#276749}.text-2xl{font-size:1.5rem}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.col-span-4{grid-column:span 4/span 4}.col-start-2{grid-column-start:2}.transform{--transform-translate-x:0;--transform-translate-y:0;--transform-rotate:0;--transform-skew-x:0;--transform-skew-y:0;--transform-scale-x:1;--transform-scale-y:1;transform:translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))}p{margin-top:1rem}@media (min-width:768px){.md\:text-3xl{font-size:1.875rem}}
+  </style>
+</head>
 
-            <!-- START FOOTER -->
-            <div class="footer">
-              <table role="presentation" border="0" cellpadding="0" cellspacing="0">
-                <tr>
-                  <td class="content-block">
-                    <span class="apple-link">Footerish stuff</span>
-                    @yield('footer')
-                    <br> Don't like these emails? <a href="#">Unsubscribe</a>.
-                  </td>
-                </tr>
-                <tr>
-                  <td class="content-block powered-by">
-                    Powered by <a href="#">InvoiceNinja</a>.
-                  </td>
-                </tr>
-              </table>
+@if($design == 'dark')
+  <style>
+    * {
+      color: #cbd5e0 !important;
+    }
+  </style>
+@endif
+
+<body class="{{ $design == 'light' ? 'bg-gray-200' : 'bg-gray-800' }} my-10 font-sans {{ $design == 'light' ? 'text-gray-700' : 'text-gray-400' }}">
+<div class="grid grid-cols-6">
+        <div class="col-start-2 col-span-4">
+            <div class="{{ $design == 'light' ? 'bg-white' : 'bg-gray-900' }} shadow border-t-2 {{ $design == 'light' ? 'border-green-500' : 'border-gray-800' }}">
+                {{ $header }}
+                <div id="text" class="px-10 py-6 flex flex-col">
+                    @isset($greeting)
+                      <p>{{ $greeting }}</p>
+                    @endisset
+                    <p>
+                      {{ $slot }}
+                    </p>
+                    @isset($signature)
+                      <p>{{ $signature }}</p>
+                    @endisset
+                </div>
             </div>
-            <!-- END FOOTER -->
 
-          </div>
-        </td>
-        <td>&nbsp;</td>
-      </tr>
-    </table>
-  </body>
+            @isset($below_card)
+            <div id="bottomText" class="text-center my-4 px-10">
+                {{ $below_card }}
+            </div>
+            @endisset
+
+        </div>
+    </div>
+</body>
 </html>
\ No newline at end of file