diff --git a/website/app/support/page.tsx b/website/app/support/page.tsx
index ef882913..caa7ffe8 100644
--- a/website/app/support/page.tsx
+++ b/website/app/support/page.tsx
@@ -2,26 +2,19 @@
 
 import Link from "next/link";
 import { MdQuestionMark, MdPerson, MdOutlineBugReport } from "react-icons/md";
-import { useIsScreenWidthLessThan } from "@/hooks/useIsScreenWidthLessThan";
 import { Shape1, Shape2 } from "@/components/bg-shapes";
 
 export default function FeaturesPage() {
-  const shouldHideNumbers = useIsScreenWidthLessThan(780);
-
   return (
     <div className="z-1">
       <>
         <div
-          className={`absolute z-0 w-[50%] top-[50px] left-[-20%] ${
-            shouldHideNumbers ? "hidden" : "visible"
-          }`}
+          className={`absolute z-0 w-[50%] top-[50px] left-[-20%] hidden lg:block`}
         >
           <Shape1 />
         </div>
         <div
-          className={`absolute z-0 w-[50%] top-[200px] right-[-20%] ${
-            shouldHideNumbers ? "hidden" : "visible"
-          }`}
+          className={`absolute z-0 w-[50%] top-[200px] right-[-20%] hidden lg:block`}
         >
           <Shape2 />
         </div>
@@ -32,14 +25,14 @@ export default function FeaturesPage() {
           <h1 className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-xl md:text-2xl font-bold text-center text-green-primary px-4">
             Need support?
           </h1>
-          <p className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary text-center text-xs md:text-sm px-4">
+          <p className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary text-center text-xs md:text-sm px-4 font-bold">
             If you have any inquiries or need assistance, our team is here to
             help.
           </p>
         </div>
         <div className="grid grid-cols-main md:pb-[250px] pt-8 md:pt-0">
-          <div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary flex gap-x-16 mb-[128px] justify-center flex-col md:flex-row px-4">
-            <div className="flex-1 flex flex-col items-center justify-start">
+          <div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary flex gap-x-4 2xl:gap-x-16 mb-[128px] justify-center flex-col md:flex-row px-4">
+            <div className="flex-1 flex flex-col items-center justify-start bg-[white] border p-4">
               <MdQuestionMark size={120} color="#107c41" />
               <h3 className="text-center font-bold">Got questions?</h3>
               <p className="mt-4 text-center">
@@ -54,7 +47,7 @@ export default function FeaturesPage() {
                 page
               </p>
             </div>
-            <div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0">
+            <div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0 bg-[white] border p-4 mt-8 md:mt-0">
               <MdPerson size={120} color="#107c41" />
               <h3 className="text-center font-bold">
                 Need talented developers?
@@ -64,7 +57,7 @@ export default function FeaturesPage() {
                 your product.
               </p>
             </div>
-            <div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0">
+            <div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0 bg-[white] border p-4 mt-8 md:mt-0">
               <MdOutlineBugReport size={120} color="#107c41" />
               <h3 className="text-center font-bold">Technical issues?</h3>
               <p className="mt-4 text-center">
diff --git a/website/components/bg-shapes.tsx b/website/components/bg-shapes.tsx
index 469f6c2d..23a51d50 100644
--- a/website/components/bg-shapes.tsx
+++ b/website/components/bg-shapes.tsx
@@ -9,7 +9,7 @@ const Shape1 = () => {
       "#s1-blob1",
       { path: "#s1-blob1" },
       { path: "#s1-blob2" },
-      { duration: 3500, yoyo: true, repeat: 999 }
+      { duration: 3500, yoyo: true, repeat: 100 }
     );
 
     tween1.start();
@@ -49,7 +49,7 @@ const Shape2 = () => {
       "#s2-blob1",
       { path: "#s2-blob1" },
       { path: "#s2-blob2" },
-      { duration: 3500, yoyo: true, repeat: 999 }
+      { duration: 3500, yoyo: true, repeat: 100 }
     );
 
     tween1.start();
diff --git a/website/components/footer.tsx b/website/components/footer.tsx
index fd52b214..12a4b1e9 100644
--- a/website/components/footer.tsx
+++ b/website/components/footer.tsx
@@ -11,7 +11,7 @@ export const Footer = () => {
           <h2 className="font-bold text-green-primary text-sm mb-4 md:mb-[32px]">
             Info
           </h2>
-          <ul className="text-white-secondary3 flex flex-col gap-y-2">
+          <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
             {/* <Link href="/cookies">Cookies</Link> */}
             <Link href="/privacy-policy">Privacy Policy</Link>
           </ul>
@@ -20,7 +20,7 @@ export const Footer = () => {
           <h2 className="font-bold text-green-primary text-sm mb-4 md:mb-[32px]">
             Explore
           </h2>
-          <ul className="text-white-secondary3 flex flex-col gap-y-2">
+          <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
             <li>
               <Link href="/demo">Demo</Link>
             </li>
@@ -60,7 +60,7 @@ export const Footer = () => {
           <h2 className="font-bold text-green-primary text-sm mb-4 md:mb-[32px]">
             Contact
           </h2>
-          <ul className="text-white-secondary3 flex flex-col gap-y-2">
+          <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
             <li>Silevis Software Sp. z o.o.</li>
             <li>Sienkiewicza Street 17/3</li>
             <li>25-007 Kielce, Poland</li>
diff --git a/website/pages/docs/5.0/1-getting-started.mdx b/website/pages/docs/5.0/1-getting-started.mdx
index ceca9b37..419f7223 100644
--- a/website/pages/docs/5.0/1-getting-started.mdx
+++ b/website/pages/docs/5.0/1-getting-started.mdx
@@ -12,7 +12,7 @@ In this guide, we're going to build a very simple React App, which will make use
 #### NPM Install
 
 ```shell
-npm i @silevis/reactgrid
+npm i @silevis/reactgrid@5.0.0-alpha.2
 ```
 
 Unlike previous versions, there's no longer a need to import the CSS file separately.
@@ -21,9 +21,22 @@ Unlike previous versions, there's no longer a need to import the CSS file separa
 
 To integrate ReactGrid into your application, configure the grid using [rows](/docs/5.0/6-api/1-types/1-row), [columns](/docs/5.0/6-api/1-types/2-column), and [cells](/docs/5.0/6-api/1-types/3-cell). However, if you provide only [cells](/docs/5.0/6-api/1-types/3-cell) with specified `rowIndex` and `colIndex`, the rows and columns will be automatically generated. If you want to define specific row heights, column widths or row and column reordering, you should pass them explicitly to the ReactGrid component. Below is a detailed breakdown of how to set this up, including an example configuration file.
 
-### Configure ReactGrid inside your application
+#### Understanding the Workflow
 
-Let's create a simple example including the aggregation:
+Let's create a simple example including the aggregation. The values of the cells in the **Sum** row and **Total** column will be automatically calculated from the values entered into the cells in the **H1** and **H1** columns.
+
+<div style={{ marginTop: 25, display: "flex", justifyContent: "center" }}>
+  <img src="/reactgrid/static/workflow-table-1.png" />
+</div>
+---
+
+To achieve this, we will need an array of [cells](/docs/5.0/6-api/1-types/3-cell) with defined indices, a template, and props. Once we have created all the necessary cells to build the example above, we can pass them to the ReactGrid component.
+
+<div style={{ marginTop: 25, display: "flex", justifyContent: "center" }}>
+  <img src="/reactgrid/static/workflow-table-2.png" />
+</div>
+
+### Live implementation
 
 ---
 
@@ -73,7 +86,7 @@ const createYearDataRow = (rowIndex: number, year: Year, setYearsData) => {
     },
   };
 
-  const isTotalCell = (colIndex: number) => colIndex === year.values.length - 1; // last column is the total
+  const isTotalCell = (colIndex: number) => colIndex === year.values.length - 1;
 
   const yearValueCells = year.values.map((value, colIndex) => {
     const isEditable = year.label !== "Sum" && !isTotalCell(colIndex);
@@ -141,11 +154,11 @@ const addTotalValues = (years: Year[]) => {
 const initialYearData: Year[] = [
   {
     label: "2023",
-    values: new Array(2).fill(0).map(() => Math.floor(Math.random() * 9) + 1), // e.g. [1, 3]
+    values: new Array(2).fill(0).map(() => Math.floor(Math.random() * 9) + 1),
   },
   {
     label: "2024",
-    values: new Array(2).fill(0).map(() => Math.floor(Math.random() * 9) + 1), // e.g. [2, 4]
+    values: new Array(2).fill(0).map(() => Math.floor(Math.random() * 9) + 1),
   },
 ];
 
diff --git a/website/public/static/workflow-table-1.png b/website/public/static/workflow-table-1.png
new file mode 100644
index 00000000..34a5a127
Binary files /dev/null and b/website/public/static/workflow-table-1.png differ
diff --git a/website/public/static/workflow-table-2.png b/website/public/static/workflow-table-2.png
new file mode 100644
index 00000000..934c22b7
Binary files /dev/null and b/website/public/static/workflow-table-2.png differ