diff --git a/src/assets/images/support/header-pro.jpg b/src/assets/images/support/header-pro.jpg
new file mode 100644
index 000000000..40e9d722c
Binary files /dev/null and b/src/assets/images/support/header-pro.jpg differ
diff --git a/src/assets/images/support/pro-effect.png b/src/assets/images/support/pro-effect.png
new file mode 100644
index 000000000..664b4a050
Binary files /dev/null and b/src/assets/images/support/pro-effect.png differ
diff --git a/src/views/support/Support.vue b/src/views/support/Support.vue
index 8d10e9059..c4a40d553 100755
--- a/src/views/support/Support.vue
+++ b/src/views/support/Support.vue
@@ -1,85 +1,323 @@
 <template>
     <div>
-        <div class="content-section introduction">
+        <div class="content-section header-support">
             <div class="feature-intro">
                 <h1>Support</h1>
-                <p>Professional support for the open source innovation</p>
+                <p>Professional support for the open source innovation.</p>
             </div>
         </div>
 
-        <div class="content-section documentation">
-            <h5>Community Support</h5>
-            <p><a href="https://forum.primefaces.org/viewforum.php?f=110">Forum</a> is where the community users gather to seek support, post topics and discuss the technology. PrimeTek does not
-            guarantee response at forum although it is monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PrimeVue PRO support.</p>
-
-            <h5>PrimeVue PRO Support</h5>
-            <div class="pro-section p-grid p-nogutter">
-                <div class="pro-section-text p-col-12 p-md-8">
-                     <p>PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account,
-                            you no longer need to post your questions in the community forum and your issues to community issue tracker.
-                    With PrimeVue PRO, it's easy to support, tune and add features to PrimeVue as if it were an in-house framework.</p>
-                     <a class="action-button" href="mailto:primevue@primetek.com.tr">GET A QUOTE</a>
-                </div>
-
-                <div class="pro-section-image p-col-12 p-md-4">
-                    <img alt="PRO" src="../../assets/images/home/asset-pro.png" />
+        <div class="content-section options p-grid">
+            <div class="p-col-12 p-md-6 p-lg-6">
+                <div class="card support-box">
+                    <h5>Community Support</h5>
+                    <p><a href="https://forum.primefaces.org/viewforum.php?f=35">Forum</a> is where the community users gather to seek support, post topics and discuss the technology. PrimeTek does not
+                    guarantee response at forum although it is monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PrimeNG PRO support.</p>
                 </div>
             </div>
 
-            <h5>Standard PRO Services</h5>
-            <ul>
-                <li>Access to pro.primefaces.org</li>
-                <li>Response within 1 business day.</li>
-                <li>Defect patches.</li>
-                <li>Private branch management in case you need.</li>
-                <li>Customized builds.</li>
-                <li>Unlimited number of cases.</li>
-                <li>Remote desktop connection.</li>
-                <li>Conference calls for discussions.</li>
-                <li>High priority to your issues.</li>
-                <li>Notifications about security updates.</li>
-            </ul>
+            <div class="p-col-12 p-md-6 p-lg-6">
+                <div class="p-d-flex p-flex-column p-jc-between card support-box pro">
+                    <div>
+                        <h5>PrimeNG PRO Support</h5>
+                        <p>PrimeNG PRO is a term based commercial support service. With the exclusive services of Pro account,
+                            you no longer need to post your questions in the community forum and your issues to community issue tracker.
+                        With PrimeNG PRO, it's easy to support, tune and add features to PrimeNG as if it were an in-house framework.</p>
+                    </div>
+                    <a class="action-button" href="mailto:primeng@primetek.com.tr">GET A QUOTE</a>
+                </div>
+            </div>
+        </div>
 
-            <h5>New Features (Optional)</h5>
+        <div class="content-section section-moreaboutpro">
+            <h5 class="section-header">More About Pro</h5> 
+            <div class="p-grid">
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Access to pro.primefaces.org</h6>
+                            <p>PRO means high-touch support. Contact us directly from a private JIRA with unlimited support tickets!
+                            </p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-1">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Response within 1 Business Day</h6>
+                            <p>Once you create a case, your request will be routed to our PRO team and they will get in touch within 1 business day.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-2">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Long Term Support License</h6>
+                            <p>LTS Support ensures stability, premium quality and advanced security for the prior versions. </p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-3">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Theme Designer License</h6>
+                            <p>Designer is the ultimate tool to create your own PrimeNG experience powered by a SASS based theme engine with 500+ variables and a Visual Designer. </p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-4">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Defect patches</h6>
+                            <p>We identify, prioritize, fix your defects and provide fix patches.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-5">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Private Branch Management</h6>
+                            <p>Our PRO Team provides private customized branch management.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-6">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Customized Builds</h6>
+                            <p>We deliver you customized build folders to help to support your project.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-7">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Unlimited Number of Cases</h6>
+                            <p>Take advantage of the unlimited number of cases. Our PRO team is at your side to solve all the problems you are experiencing. </p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-8">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Remote Desktop Connection</h6>
+                            <p>Direct Access to your issues! Your problems are resolved faster with our instant remote connection.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-9">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Conference Calls</h6>
+                            <p>Our PRO Team helps resolve critical issues in conference calls and ensure high-value collaboration with your team.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-10">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>High Priority to Your Issues.</h6>
+                            <p>PRO delivers the premium support and expertise you need. Resources are prioritized for an optimized response to critical issues.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Notifications About Security Updates</h6>
+                            <p>Be the first to be informed about critical security updates.</p>
+                        </div>
+                    </div>     
+                </div>
+            </div>
+        </div>
 
-            <p>New feature and enhancement requests are not available in core services and provided via an hour based model instead.  When you have a feature request we provide an estimate, if you confirm we deliver your request within an estimated timeframe and deduct the amount of work from your hours. These requests can be;</p>
-
-            <ul>
-                <li>New components.</li>
-                <li>New functionality to existing components.</li>
-                <li>Changing the way a certain functionality is implemented.</li>
-                <li>Accessibility improvements.</li>
-                <li>Proof of Concept implementations of a use case.</li>
-                <li>Code reviews to offer best practices.</li>
-            </ul>
-
-            <p>You can purchase additional hours along with the subscription and also anytime during your subscription period. If your subscription term ends with unused hours, they will be added to your new subscription term in case you extend.</p>
+        <div class="content-section section-newfeatures">
+            <h5>New Features</h5> 
+            <div class="p-d-flex p-mb-4">
+                <p>New feature and enhancement requests are not available in core services and provided via an hour based model instead. When you have a feature request we provide an estimate, if you confirm we deliver your request within an estimated timeframe and deduct the amount of work from your hours. These requests can be;</p>
+            </div>
+            <div class="p-grid">
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-1">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>New Components</h6>
+                            <p>User needs are frequently changing. To meet your needs, we create new components.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-5">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>New Functionality to Existing Components</h6>
+                            <p>We add and configure new features to existing components to enhance the capabilities of your application.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-2">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Changing the Way a Certain Functionality is Implemented</h6>
+                            <p>A problem might have several different solutions. We offer alternative ways for existing implementations.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-7">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Accessibility Improvements</h6>
+                            <p>Our team makes accessibility improvements that allow your developers to create more accessible applications.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-4">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Proof of Concept Implementations of a Use Case</h6>
+                            <p>Your projects can move forward faster with our effort to create PoC.</p>
+                        </div>
+                    </div>     
+                </div>
+                <div class="p-col-6 p-lg-3">
+                    <div class="p-d-flex">
+                        <div class="dot color-6">&nbsp;</div>
+                        <div class="p-d-flex p-flex-column p-pl-3">
+                            <h6>Code Reviews to Offer Best Practices</h6>
+                            <p>Our experienced team reviews your entire project and improves your code quality.</p>
+                        </div>
+                    </div>     
+                </div>
+            </div>
+            <div class="p-d-flex p-mt-4">
+                <p>You can purchase additional hours along with the subscription and also anytime during your subscription period. If your subscription term ends with unused hours, they will be added to your new subscription term in case you extend.</p>
+            </div>
         </div>
     </div>
 </template>
 
 <style lang="scss" scoped>
-::v-deep(.pro-section) {
+.header-support {
     display: flex;
-    margin-top: .75rem;
+    background-image: url('../../assets/images/support/header-pro.jpg');
+    background-size: cover;
+    height: 10rem;
+    color: white;
+}
 
-    .pro-section-text {
-        flex: 1 1 auto;
-        padding: 0rem 1rem 0 0;
+.options {
+    background-color: var(--surface-b);
+}
 
-        .action-button {
-            display: inline-block;
-            margin-top: 1rem;
+.support-box {
+    height: 20rem;
+
+    &.pro {
+        background-color: #303132;
+        background-image: url('../../assets/images/support/pro-effect.png');
+        background-size: cover;
+        color: white;
+    }
+
+    a {
+        color: #2196f3;
+        font-weight: 600;
+
+        &:hover {
+            text-decoration: underline;
         }
     }
+}
 
-    .pro-section-image {
-        text-align: center;
+.action-button {
+    background-color: #D8692B;
+}
+
+.section-moreaboutpro {
+    background-color: #303132;
+    color: white;
+    margin-top: 1rem;
+
+    p {
+        color: #aaaaaa;
+    }
+
+    h6 {
+        margin-top:0;
+    }
+
+    .section-header {
+        position: relative;
+        bottom: 3.5rem;
+        background-color: #303132;
         padding: 1rem;
+        display: inline;
+        border-radius: 4px 4px 0 0;
     }
 }
 
-li {
-    line-height: 1.5;
+.section-newfeatures {
+    background-color: white;
+    margin-top: 2rem;
+
+    p {
+        color: var(--text-color-secondary);
+    }
+}
+
+.dot {
+    height: 1rem;
+    width: 1rem;
+    min-height: 1rem;
+    min-width: 1rem;
+    border-radius: 2px;
+    background-color: #DA2F4F;
+
+    &.color-1 {
+        background-color: #2B76D8;
+    }
+    &.color-2 {
+        background-color: #D8692B;
+    }
+    &.color-3 {
+        background-color: #6ECE65;
+    }
+    &.color-4 {
+        background-color: #E9DC68;
+    }
+    &.color-5 {
+        background-color: #C159A4;
+    }
+    &.color-6 {
+        background-color: #2BD8C3;
+    }
+    &.color-7 {
+        background-color: #2BAED8;
+    }
+    &.color-8 {
+        background-color: #D8A82B;
+    }
+    &.color-9 {
+        background-color: #A7C553;
+    }
+    &.color-10 {
+        background-color: #A06FC7;
+    }
 }
 </style>
\ No newline at end of file