diff --git a/_includes/example-1.md b/_includes/example-1.md
new file mode 100644
index 000000000..f503f121b
--- /dev/null
+++ b/_includes/example-1.md
@@ -0,0 +1,4 @@
+
+### Example 1
+
+The src content for **Example 1**
diff --git a/_includes/example-2.md b/_includes/example-2.md
new file mode 100644
index 000000000..ac27a399f
--- /dev/null
+++ b/_includes/example-2.md
@@ -0,0 +1,4 @@
+
+### Example 2
+
+The src content for **Example 2**
diff --git a/_includes/example-3.md b/_includes/example-3.md
new file mode 100644
index 000000000..85f81f770
--- /dev/null
+++ b/_includes/example-3.md
@@ -0,0 +1,4 @@
+
+### Example 3
+
+The src content for **Example 3**
diff --git a/_includes/example.md b/_includes/example.md
deleted file mode 100644
index 8ce018c22..000000000
--- a/_includes/example.md
+++ /dev/null
@@ -1,25 +0,0 @@
-
-The integration consists of three main steps. **Creating** the payment order,
-**displaying** the payment menu, and **capturing** the funds. In addition, there
-are other post-purchase options you need. We get to them later on.
-
-## Create Payment Order
-
-When your customer has initiated a purchase, you need to create a payment order.
-Start by performing a `POST` request towards the `paymentorder` resource with
-payer information and a `completeUrl`.
-
-The `productName` field has been removed in v3.1, and you identify the
-`paymentOrder` version as v3.1 in the header instead.
-
-`POST`, `PATCH`, `GET` and `PUT` requests use this header:
-
-`Content-Type: application/json;version=3.1`
-
-`GET` requests can also use this header:
-
-`Accept: application/json;version=3.1`
-
-Valid versions are **3.1**, **3.0** and **2.0**. If you do not add a version,
-the request will default to **2.0**. Using the `productName` and setting it to
-`checkout3` will default to **3.0**.
diff --git a/_includes/tabs.html b/_includes/tabs.html
index f4f8761d4..5e428506b 100644
--- a/_includes/tabs.html
+++ b/_includes/tabs.html
@@ -1,78 +1,106 @@
 {%- comment -%}
 **Parameters
 tab_list(required): An array with items having the attributes title(required), content_text (required),
-content_src(optional)
-active_tab_index(optional): Index of the tab to be active by default
+content_src(optional), mark_with_star (optional)
+default_tab_index(optional): Index of the tab to be active by default, starting from 1
 {%- endcomment -%}
 
 {% assign tabs = include.tab_list %}
-{% assign active_tab_index = include.active_tab_index | default: 1 %}
+{% assign max_index = include.tab_list | size | minus:1 %}
+{% assign default_tab_index = include.default_tab_index | minus:1 | at_least:0 | at_most:max_index %}
 
 <div id="tabs-container" class="tabs">
     <ul>
         {% for tab in tabs %}
-        <li class="tab-title {% if forloop.index == active_tab_index %}active{% endif %}">
-            <a id="tab-title-{{ forloop.index }}">{{ tab.title }}</a>
+        <li id="{{ tab.title | replace: ' ', '_' | replace: '.', '' }}"
+            class="{% if forloop.index0 == default_tab_index %}active{% endif %}">
+            <a id="{{ forloop.index0 }}">{{ tab.title }}{% if tab.mark_with_star %}*{% endif %}</a>
         </li>
         {% endfor %}
     </ul>
 </div>
-
-{% for tab in tabs %}
-<p id="tab-content-{{ forloop.index }}" class="tab-content {% unless forloop.index == active_tab_index %}d-none{% endunless %}">
-    {{ tab.content_text }}
-    {% if tab.content_src %}
-    <div id="tab-src-{{ forloop.index }}" class="tab-src {% unless forloop.index == active_tab_index %}d-none{% endunless %}">
-        {% capture sourced_content %}
-        {% include {{tab.content_src}} %}
-        {% endcapture %}
-        {{ sourced_content | markdownify }}
-    </div>
-    {% endif %}
+<p id="tab-content-text">
 </p>
+<div id="tab-content-src">
+</div>
+{% for tab in tabs %}
+{% if tab.content_src %}
+<div class="tab-src">
+    {% capture sourced_content %}
+    {% include {{tab.content_src}} %}
+    {% endcapture %}
+    {{ sourced_content | markdownify }}
+</div>
+{% endif %}
 {% endfor %}
 
 <script>
-    $("#tabs-container ul li a").click(function () {
-        const tabTitles = $(".tab-title");
-        for (let index = 0; index < tabTitles.length; index++) {          
-            const tab = tabTitles[index];
-            tab.classList.remove("active");
+    var defaultIndex = {{ default_tab_index | jsonify }};
+    const allTabs = {{ tabs | jsonify }};
+    const compiledTabTextContents = allTabs?.map(tab => tab.content_text);
+    const compiledTabSrcContents = $(".tab-src");
+</script>
+
+<script>
+    $(document).ready(function () {
+        let tabSrcContents = [];
+        for (let index = 0; index < compiledTabSrcContents.length; index++) {
+            tabSrcContents[index] = compiledTabSrcContents[index].innerHTML;
         }
+        $(".tab-src").remove();
+
+        $("#tabs-container ul li a").click(function () {
+            const tabTitles = $("#tabs-container ul li");
+            for (let index = 0; index < tabTitles.length; index++) {
+                tabTitles[index].classList.remove("active");
+            }
 
-        $(this).parent().addClass("active");
-        const tabContentId = $(this).attr("id").replace("tab-title-", "tab-content-");
-        const tabSrcId = $(this).attr("id").replace("tab-title-", "tab-src-");
+            $(this).parent().addClass("active");
+            populateTabContent(this.id);
+        });
 
-        let tabContents = $(".tab-content");
-        
-        for (let index = 0; index < tabContents.length; index++) {
-            const tabContent = tabContents[index];
+        function populateTabContent(index) {
+            if (compiledTabTextContents && compiledTabTextContents[index]) {
+                $("#tab-content-text").html(compiledTabTextContents[index]);
+            } else {
+                $("#tab-content-text").html("");
+            }
 
-            switch (tabContent.id) {
-                case tabContentId:
-                    tabContent.classList.remove("d-none");
-                    break;
-                default:
-                    if (!tabContent.classList.contains("d-none"))
-                        tabContent.classList.add("d-none");
-                    break;
+            if (compiledTabSrcContents && compiledTabSrcContents[index]) {
+                $("#tab-content-src").html(compiledTabSrcContents[index]);
+            }
+            else {
+                $("#tab-content-src").html("");
             }
         }
-        let tabSrcs = $(".tab-src");
-        
-        for (let index = 0; index < tabSrcs.length; index++) {
-            const tabSrc = tabSrcs[index];
 
-            switch (tabSrc.id) {
-                case tabSrcId:
-                    tabSrc.classList.remove("d-none");
-                    break;
-                default:
-                    if (!tabSrc.classList.contains("d-none"))
-                    tabSrc.classList.add("d-none");
-                    break;
+        function setActiveTabOnLoad() {
+            const hash = window.location.hash;
+
+            if (hash) {
+                const hashParts = hash.split("-").reverse();
+                const tabTitles = $("#tabs-container ul li");
+                for (let index = 0; index < tabTitles.length; index++) {
+                    const tabTitleParts = tabTitles[index].id.split("_").reverse();
+                    
+                    if (hashParts[0] === tabTitleParts[0]) {
+                        defaultIndex = index;
+                    }
+                }
+            }
+
+            const tabTitles = $("#tabs-container ul li");
+            for (let index = 0; index < tabTitles.length; index++) {
+
+                if (index === defaultIndex) {
+                    tabTitles[index].classList.add("active");
+                } else {
+                    tabTitles[index].classList.remove("active");
+                }
             }
         }
+
+        setActiveTabOnLoad();
+        populateTabContent(defaultIndex);
     });
 </script>
\ No newline at end of file
diff --git a/_sass/accordion-table.scss b/_sass/accordion-table.scss
index 32975df7e..6b3cf08ba 100644
--- a/_sass/accordion-table.scss
+++ b/_sass/accordion-table.scss
@@ -19,37 +19,5 @@
                 display: block;
             }
         }
-
-        &:hover {
-            background-color: $apricot;
-        }
-    }
-
-    .accordion-body {
-        padding: 0;
-    }
-
-    table {
-        border: 1px solid rgba(153, 153, 153, 0.5);
-        border-radius: 0.25rem;
-
-        th {
-            font-size: 0.875rem;
-        }
-
-        tbody {
-            font-size: 0.875rem;
-
-            tr:nth-child(odd) {
-                background-color: #F9F8F6;
-            }
-
-            tr {
-                &:hover {
-                    background-color: $apricot;
-                    transition: .5s;
-                }
-            }
-        }
     }
 }
diff --git a/_sass/card.scss b/_sass/card.scss
deleted file mode 100644
index 65bdf5a09..000000000
--- a/_sass/card.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.cards-icon {
-    svg {
-        fill: $brown;
-        max-width: 24px;
-    }
-}
diff --git a/_sass/front-page.scss b/_sass/front-page.scss
index 7b6d59fdb..9ee2e6b2a 100644
--- a/_sass/front-page.scss
+++ b/_sass/front-page.scss
@@ -139,7 +139,6 @@ $front-page-max-width: $breakpoint-lg;
         }
 
         @media screen and (min-width: $breakpoint-xxl) {
-            margin-bottom: 8rem;
             
             .front-page-intro-cards {
                 left: 0;
@@ -244,130 +243,4 @@ $front-page-max-width: $breakpoint-lg;
 
         }
     }
-
-    .front-page-demoshop {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: $front-page-padding;
-        padding-top: 4rem;
-        margin-bottom: 4rem;
-        width: 100%;
-        height: 22.5rem;
-        background-color: $dark-brown;
-        text-decoration: none;
-        border-radius: 1rem;
-
-        &:after {
-            display: none;
-            content: none;
-        }
-
-        .front-page-demoshop-text {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 2rem;
-            max-width: $front-page-max-width;
-            width: 100%;
-
-            .h2 {
-                color: $white;
-            }
-
-            .demoshop-text-description {
-                color: $white;
-                width: 40%;
-                min-height: 4.5rem;
-                font-size: 1rem;
-
-            }
-            
-        }
-
-        @media screen and (max-width: $breakpoint-md) {
-            padding-top: 3rem;
-            height: 18rem;
-
-            .front-page-demoshop-text {
-                .demoshop-text-description {
-                    width: 100%;
-                    min-height: 2.25rem;
-                }
-            }
-
-        }
-
-        .front-page-demoshop-link {
-            display: flex;
-            position: relative;
-            color: $white;
-            text-decoration: none;
-            background-color: $medium-brown;
-            align-items: center;
-            height: 4.625rem;
-            border-radius: 2px;
-            box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
-            max-width: $front-page-max-width;
-            width: 100%;
-            cursor: pointer;
-
-            a::after{
-                content: '';
-            }
-            
-            &:hover,
-            &:focus {
-                background-color: $white;
-                color: $brown;
-            
-                .h3 {
-                    color: $brown;
-                }
-            }
-
-            .demoshop-link-img {
-                display: flex;
-                align-items: center;
-                position: absolute;
-                bottom: -1rem;
-                right: 3%;
-                pointer-events: none;
-
-                .demoshop-link-img-web {
-                    width: 26.5rem;
-                    height: 15.125rem;
-                    border-radius: 2px;
-                    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
-                }
-
-                .demoshop-link-img-mobile {
-                    height: 15.125rem;
-                    border-radius: 2px;
-                    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
-                    margin-right: 1rem;
-                }
-            }
-
-            .h3 {
-                color: $white;
-                padding-right: 1rem;
-                padding-left: 1.5rem;
-                margin: 0;
-            }
-        }
-
-        @media screen and (min-width: $breakpoint-xxl) {
-            .front-page-demoshop-text {
-                margin-bottom: 1rem;
-            }
-
-            .front-page-demoshop-link {
-                .demoshop-link-img {
-                    bottom: -2rem;
-                }
-            }
-        }
-    }
-
-
 }
diff --git a/_sass/swedbank-pay-design-guide-theme.scss b/_sass/swedbank-pay-design-guide-theme.scss
index 37225b483..628543501 100644
--- a/_sass/swedbank-pay-design-guide-theme.scss
+++ b/_sass/swedbank-pay-design-guide-theme.scss
@@ -3,14 +3,12 @@
 @import 'variables.scss';
 @import 'breakpoints.scss';
 
-@import 'card.scss';
+@import 'accordion-table.scss';
 @import 'code-view.scss';
 @import 'front-page.scss';
-@import 'accordion-table.scss';
 @import 'paragraph-highlight.scss';
 @import 'sidebar.scss';
 @import 'title-header.scss';
-@import 'tabs.scss';
 
 $bg: #f5f2f0;
 $darkened-bg: darken($bg, 10%);
@@ -147,6 +145,20 @@ body {
             }
         }
     }
+
+    .toc-list {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .toc-list li {
+        padding: 4px 0;
+    }
+
+    .toc-list ul {
+        padding-inline-start: 2ch;
+    }
 }
 
 .documentation {
diff --git a/_sass/tabs.scss b/_sass/tabs.scss
deleted file mode 100644
index 97ddeaa51..000000000
--- a/_sass/tabs.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.tabs {
-    margin: 2rem 0 3.75rem;
-
-    li {
-        cursor: pointer;
-    }
-}
-
-.tab-intro {
-    padding-bottom: 3rem;
-}
diff --git a/index.md b/index.md
index 4cccdf481..5a6b45e2d 100644
--- a/index.md
+++ b/index.md
@@ -28,12 +28,15 @@ table_content_payments:
     swedbankPay: true
     
 tab_list:
-- title: Tab 1 with content as text
-  content_text: Some content.
-- title: Tab 2 with content from src
-  content_src: example.md
-- title: Tab 3 with content from text
-  content_text: Text content
+- title: Tab 1
+  content_text: Some intro text for tab 1.
+  content_src: example-1.md
+- title: Tab 2
+  content_src: example-2.md
+- title: Tab 3
+  content_text: Tab 3 intro text
+  content_src: example-3.md
+  mark_with_star: true
 ---
 
 {% include card-list.html card_list=page.card_list col_class="col-lg-4" %}
@@ -51,6 +54,8 @@ There should be whitespace between paragraphs.
 There should be whitespace between paragraphs. We recommend including a README,
 or a file with information about your project.
 
+___
+
 ## Header 2
 
 This is a normal paragraph following a header. GitHub is a code hosting platform
@@ -62,26 +67,36 @@ projects from anywhere.
 > When something is important enough, you do it even if the odds are not in
 > your favor.
 
+___
+
 ### Header 3
 
 This is a normal paragraph following a header 3.
 
+___
+
 #### Header 4
 
 *   This is an unordered list following a header 4.
 *   This is an unordered list following a header 4.
 *   This is an unordered list following a header 4.
 
+___
+
 ##### Header 5
 
 1.  This is an ordered list following a header 5.
 2.  This is an ordered list following a header 5.
 3.  This is an ordered list following a header 5.
 
+___
+
 ###### Header 6
 
 This is a normal paragraph following a header 6.
 
+___
+
 ## Accordion
 
 {% capture acc-1 %}
@@ -104,6 +119,8 @@ Here we have also formatted the content as two paragraphs with padding.
 {% endcapture %}
 {% include accordion-table.html content=acc-3 header_expand_text='Expand' header_collapse_text='Collapse' header_expand_css='font-weight-normal' %}
 
+___
+
 ## Cards
 
 <div class="row mt-4">
@@ -187,9 +204,14 @@ Here we have also formatted the content as two paragraphs with padding.
     </div>
 </div>
 
+___
+
 ## Tabs
 
-{% include tabs.html tab_list=page.tab_list active_tab_index=2 %}
+{% include tabs.html tab_list=page.tab_list default_tab_index=3 %}
+
+___
+___
 
 ## Table
 
@@ -215,6 +237,8 @@ Here's a striped table.
 | ok           | good `oreos`      | hmm   |
 | ok           | good `zoute` drop | yumm  |
 
+___
+
 ## Code examples
 
 {:.code-view-header}
@@ -354,6 +378,8 @@ Here's some `<inline>`{:.language-html .highlight}
 that should `.be { highlighted: according; }`{:.language-css .highlight} to
 their language.
 
+___
+
 ## Mermaid
 
 ```mermaid
@@ -378,6 +404,8 @@ sequenceDiagram
     deactivate Merchant
 ```
 
+___
+
 ## Alerts
 
 {% include alert.html type='informative' header='Informational alert'
@@ -402,6 +430,8 @@ through highly customizable and flexible components.
 Visit our [demoshop](https://ecom.externalintegration.payex.com/pspdemoshop)
 and try out PayEx Checkout for yourself!' %}
 
+___
+
 ## Iterator
 
 {% include iterator.html next_href="page2" %}
@@ -422,6 +452,8 @@ and try out PayEx Checkout for yourself!' %}
 *   Item baz
 *   Item zip
 
+___
+
 ## And an ordered list
 
 1.  Item one
@@ -429,6 +461,8 @@ and try out PayEx Checkout for yourself!' %}
 3.  Item three
 4.  Item four
 
+___
+
 ## And a nested list
 
 *   level 1 item
@@ -447,14 +481,20 @@ and try out PayEx Checkout for yourself!' %}
     *   level 2 item
 *   level 1 item
 
+___
+
 ## Small image
 
 ![Octocat](https://github.githubassets.com/images/icons/emoji/octocat.png)
 
+___
+
 ## Large image
 
 ![Branching](https://docs.github.com/assets/cb-23923/images/help/repository/branching.png)
 
+___
+
 ## Definition lists can be used with HTML syntax
 
 <dl>
@@ -476,10 +516,14 @@ Long, single-line code blocks should not wrap. They should horizontally scroll i
 The final element.
 ```
 
+___
+
 ## Emoji support
 
 :+1: :heavy_check_mark: :fire: 💡 :unicorn:
 
+___
+
 ## Material design icons
 
 {% icon check %} {% icon line_weight %} {% icon gavel %} {% icon visibility %}