diff --git a/ngx-fudis/projects/dev/src/app/components/formExamples.component.html b/ngx-fudis/projects/dev/src/app/components/formExamples.component.html
index e695c2b41..b94c49f9c 100644
--- a/ngx-fudis/projects/dev/src/app/components/formExamples.component.html
+++ b/ngx-fudis/projects/dev/src/app/components/formExamples.component.html
@@ -13,7 +13,7 @@
         [errorSummaryVisible]="errorSummaryVisible"
         [title]="'Form title here hello'"
         [errorSummaryHelpText]="'There were some errors'"
-        [titleLevel]="2"
+        [level]="2"
       >
         <ng-template fudisContent type="form">
           <fudis-fieldset [label]="t('fieldsetTitle')">
diff --git a/ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-form.component.ts b/ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-form.component.ts
index ad64ba0d7..fdddd37b5 100644
--- a/ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-form.component.ts
+++ b/ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-form.component.ts
@@ -23,7 +23,7 @@ type MyForm = {
           [errorSummaryLinkType]="'onClick'"
           [title]="'Dialog with fudis-form'"
           [errorSummaryHelpText]="'You did not fill all the required information'"
-          [titleLevel]="2"
+          [level]="2"
         >
           <ng-template fudisContent [type]="'form'">
             <fudis-fieldset [label]="'We need some information'" [helpText]="_greetingFromOpener">
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.docs.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.docs.mdx
index e62ce288a..ce11d8e37 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.docs.mdx
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.docs.mdx
@@ -165,7 +165,7 @@ class SimpleDialogComponent {
 
 ## Fudis Form inside Dialog
 
-When using Form inside Dialog, wrap the Form inside `fudis-dialog-content` and use it normally. Meaning, add all the necessary Error Summary properties, such as `errorSummaryLinkType` and `errorSummaryHelpText`. Also add `title` and `titleLevel`, this title will be the title of the dialog and have initial focus when dialog is opened with keyboard.
+When using Form inside Dialog, wrap the Form inside `fudis-dialog-content` and use it normally. Meaning, add all the necessary Error Summary properties, such as `errorSummaryLinkType` and `errorSummaryHelpText`. Also add `title` and `level`, this title will be the title of the dialog and have initial focus when dialog is opened with keyboard.
 
 In `fudisContent` template add form components and in `fudisActions` template add action button(s). Unlike normal form, where buttons are positioned on top of the form, **these action buttons will be positioned at the bottom** after the form content, in order to follow dialog look and feel.
 
@@ -181,7 +181,7 @@ In `fudisContent` template add form components and in `fudisActions` template ad
 				<fudis-dialog-content>
 					<fudis-form>
 						[title]="'Dialog with fudis-form'"
-						[titleLevel]="2"
+						[level]="2"
 						[errorSummaryLinkType]="'href'"
 						[errorSummaryHelpText]="'You need to fill up the information.'">
 						<ng-template fudisContent [type]="'form'">
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts
index b6b876df8..60ec3ee1b 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts
@@ -65,7 +65,7 @@ class DialogLaucherComponent {
       <fudis-dialog-content>
         <fudis-form
           [title]="'Dialog with fudis-form'"
-          [titleLevel]="2"
+          [level]="2"
           [errorSummaryLinkType]="'onClick'"
           [errorSummaryHelpText]="'You need to fill up the information.'"
         >
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.component.spec.ts
index 8fd378a87..b51d7a5b5 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.component.spec.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.component.spec.ts
@@ -37,7 +37,7 @@ import { LinkDirective } from '../../../directives/link/link.directive';
   selector: 'fudis-mock-form-component',
   template: ` <fudis-form
     #formRef
-    [titleLevel]="1"
+    [level]="1"
     [title]="'Example Form with Error Summary'"
     [id]="'unique-form-example-1'"
     [errorSummaryLinkType]="errorSummaryLinkType"
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.stories.ts
index 99105b4eb..0e2111b72 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.stories.ts
@@ -20,7 +20,7 @@ import { excludeAllRegex } from '../../../utilities/storybook';
   template: ` <fudis-form
     [align]="'center'"
     [marginTop]="'xl'"
-    [titleLevel]="1"
+    [level]="1"
     [title]="'Example Form with Error Summary'"
     [id]="id"
     [errorSummaryLinkType]="'onClick'"
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.html
index 9acbe3d7e..ee7894f5e 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.html
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.html
@@ -15,7 +15,7 @@
 >
   <div [id]="id + '_header'" class="fudis-form__header">
     <div class="fudis-form__header__main">
-      <ng-container *ngIf="title && titleLevel">
+      <ng-container *ngIf="title && level">
         <div class="fudis-form__header__title">
           <ng-container *ngIf="_dialogParent">
             <fudis-heading
@@ -23,7 +23,7 @@
               fudisDialogTitle
               [marginBottom]="'xs'"
               [size]="titleSize"
-              [level]="titleLevel"
+              [level]="level"
               >{{ title
               }}<ng-container *ngIf="badge && badgeText">
                 <fudis-badge
@@ -35,7 +35,7 @@
             </fudis-heading>
           </ng-container>
           <ng-container *ngIf="!_dialogParent">
-            <fudis-heading [marginBottom]="'xs'" [size]="titleSize" [level]="titleLevel"
+            <fudis-heading [marginBottom]="'xs'" [size]="titleSize" [level]="level"
               >{{ title
               }}<ng-container *ngIf="badge && badgeText">
                 <fudis-badge
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.spec.ts
index e3741eb9e..ad029217e 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.spec.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.spec.ts
@@ -32,7 +32,7 @@ import { LinkComponent } from '../../link/link.component';
   selector: 'fudis-mock-form-component',
   template: `<fudis-form
     [id]="'my-own-id'"
-    [titleLevel]="1"
+    [level]="1"
     [titleSize]="'md'"
     [title]="'Example Form'"
     [helpText]="'Some help for the form'"
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts
index ae91e997b..6ed8f7328 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts
@@ -70,7 +70,7 @@ export class FormComponent extends GridApiDirective implements OnInit, AfterCont
   /**
    * Heading level for the form title
    */
-  @Input() titleLevel: FudisHeadingLevel;
+  @Input() level: FudisHeadingLevel;
 
   /**
    * Heading size for the form title
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.docs.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.docs.mdx
index fe70d45cb..6cd06f801 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.docs.mdx
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.docs.mdx
@@ -60,7 +60,7 @@ The complete list of allowed properties can be found from Properties table at th
 ### Heading
 
 Fudis Form is not valid without a heading.
-**Mandatory properties** are `title` (title text content) and `titleLevel` (the semantic heading level), additionally it is possible to change the visual size of the heading with `titleSize`, which otherwise defaults to `xl`.
+**Mandatory properties** are `title` (title text content) and `level` (the semantic heading level), additionally it is possible to change the visual size of the heading with `titleSize`, which otherwise defaults to `xl`.
 See possible heading levels and sizes from [Heading Documentation](/docs/components-typography-heading--documentation).
 
 ### Badge
@@ -88,7 +88,7 @@ This is a simple example on how to use Form Component.
 
 <fudis-form
   [title]="'Example form heading'"
-  [titleLevel]="2"
+  [level]="2"
   [helpText]="'Here is some more information about this form'"
   [errorSummaryHelpText]="'There are errors in this form.'"
 >
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts
index db4f55b5a..d3a4f1837 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts
@@ -35,7 +35,7 @@ import { FudisErrorSummaryService } from '../../../services/form/error-summary/e
       />
 
       <fudis-form
-        [titleLevel]="2"
+        [level]="2"
         [title]="'Form with Text Input'"
         [errorSummaryLinkType]="'onClick'"
         [errorSummaryVisible]="errorSummaryVisible"
@@ -60,7 +60,7 @@ import { FudisErrorSummaryService } from '../../../services/form/error-summary/e
         </ng-template>
       </fudis-form>
       <fudis-form
-        [titleLevel]="2"
+        [level]="2"
         [title]="'Form with Text Area'"
         [errorSummaryLinkType]="'onClick'"
         [errorSummaryVisible]="errorSummaryVisible"
@@ -85,7 +85,7 @@ import { FudisErrorSummaryService } from '../../../services/form/error-summary/e
         </ng-template>
       </fudis-form>
       <fudis-form
-        [titleLevel]="2"
+        [level]="2"
         [title]="'Form with Checkbox Group'"
         [errorSummaryLinkType]="'onClick'"
         [errorSummaryVisible]="errorSummaryVisible"
@@ -119,7 +119,7 @@ import { FudisErrorSummaryService } from '../../../services/form/error-summary/e
         </ng-template>
       </fudis-form>
       <!-- <fudis-form
-        [titleLevel]="2"
+        [level]="2"
         [title]="'Form with Select and Multiselect'"
         [errorSummaryLinkType]="'onClick'"
         [errorSummaryVisible]="errorSummaryVisible"
@@ -229,7 +229,7 @@ class ExampleWithMultipleFormsComponent {
       [marginTop]="'xl'"
       [badge]="badge"
       [badgeText]="badgeText"
-      [titleLevel]="titleLevel"
+      [level]="level"
       [title]="title"
       [titleSize]="titleSize"
       [helpText]="helpText"
@@ -395,7 +395,7 @@ class FormContentExampleComponent implements OnInit {
   ) {}
 
   @Input() title: string;
-  @Input() titleLevel: FudisHeadingLevel;
+  @Input() level: FudisHeadingLevel;
   @Input() titleSize: FudisHeadingSize;
   @Input() helpText: string;
   @Input() badge: FudisBadgeVariant;
@@ -542,7 +542,7 @@ export default {
         type: 'select',
       },
     },
-    titleLevel: {
+    level: {
       options: [1, 2, 3, 4, 5, 6],
       control: {
         type: 'select',
@@ -563,7 +563,7 @@ export const Example: StoryFn<FormComponent> = (args: FormComponent) => ({
   props: args,
   template: html` <example-form-content
     [title]="title"
-    [titleLevel]="titleLevel"
+    [level]="level"
     [titleSize]="titleSize"
     [helpText]="helpText"
     [badge]="badge"
@@ -576,7 +576,7 @@ export const Example: StoryFn<FormComponent> = (args: FormComponent) => ({
 
 Example.args = {
   title: 'Example Form Heading',
-  titleLevel: 1,
+  level: 1,
   titleSize: 'xl',
   helpText: 'This is an additional help text to give user more information about the form',
   badge: 'primary',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/multiselect/multiselect.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/multiselect/multiselect.stories.ts
index c3de2400f..94c8944f7 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/multiselect/multiselect.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/multiselect/multiselect.stories.ts
@@ -136,7 +136,7 @@ const PreSelectedTemplate: StoryFn<MultiselectComponent> = (args: MultiselectCom
     </fudis-body-text>
 
     <ng-container *ngIf="control.value && control.value.length > 0">
-      <fudis-section [title]="'Selected options'" [titleLevel]="2">
+      <fudis-section [title]="'Selected options'" [level]="2">
         <ng-template fudisContent type="section">
           <ng-container *ngFor="let option of control.value; let i = index">
             <fudis-heading [level]="3" [size]="'md'">Option {{i + 1}} </fudis-heading>
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/select-showcase.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/select-showcase.stories.ts
index 1d25cb897..2e9288f46 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/select-showcase.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/select-showcase.stories.ts
@@ -38,7 +38,7 @@ const SelectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectComponent)
     groupedMockData,
   },
   template: html`
-    <fudis-section [title]="'Select showcase'" [titleLevel]="1" [width]="'md'">
+    <fudis-section [title]="'Select showcase'" [level]="1" [width]="'md'">
       <ng-template fudisNotifications type="section">
         <fudis-body-text
           >Following Select components share all same Form Control. When you change value in one,
@@ -231,7 +231,7 @@ const MultiselectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectCompo
     groupedMockData,
   },
   template: html`
-    <fudis-section [title]="'Multiselect showcase'" [titleLevel]="1" [width]="'md'">
+    <fudis-section [title]="'Multiselect showcase'" [level]="1" [width]="'md'">
       <ng-template fudisNotifications type="section">
         <fudis-body-text
           >Following Multiselect components share all same Form Control</fudis-body-text
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-docs.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-docs.mdx
index d47545ea9..1e3018210 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-docs.mdx
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-docs.mdx
@@ -15,7 +15,7 @@ Section has two main areas: header and content. Inside header, addition to headi
 
 ### Header
 
-Each Section should be identified, therefore `title` is mandatory property which can be modified with `titleSize` and `titleLevel` properties. As in [Heading Component](/docs/components-typography-heading--documentation), size is visual and level is semantic adjustment.
+Each Section should be identified, therefore `title` is mandatory property which can be modified with `titleSize` and `level` properties. As in [Heading Component](/docs/components-typography-heading--documentation), size is visual and level is semantic adjustment.
 Heading can also include `tooltip` with all the [Tooltip](/docs/directives-tooltip--documentation) Inputs available.
 
 #### Notifications and Actions
@@ -48,7 +48,7 @@ Avoiding too complex page structure is recommended, but if you have a need to ne
 
 #### Heading Levels
 
-Just as with any HTML content, proper heading level order is important for the accessibility. If you are nesting Sections, make sure that `titleLevel` of nested Section is lower than its parent's.
+Just as with any HTML content, proper heading level order is important for the accessibility. If you are nesting Sections, make sure that `level` of nested Section is lower than its parent's.
 
 #### Actions
 
@@ -59,7 +59,7 @@ If you have Section inside Section, and the nested one has Actions-content but p
 <fudis-section
   [title]="'Parent Section'"
   [titleSize]="'lg'"
-  [titleLevel]="2"
+  [level]="2"
   >
   // Empty Actions template, so that nested Actions will not be rendered to the parent!
   <ng-template fudisActions [type]="'section'"></ng-template>
@@ -67,7 +67,7 @@ If you have Section inside Section, and the nested one has Actions-content but p
     <fudis-section
       [title]="'Nested Section'"
       [titleSize]="'md'"
-      [titleLevel]="3" >
+      [level]="3" >
       <ng-template fudisActions [type]="'section'">
         <fudis-button [label]="'Nested Action button'"/>
       </ng-template>
@@ -100,7 +100,7 @@ When using Section inside [Form](/docs/components-form-form--documentation) with
 
 - Section Component uses native `<section>` element
 - Section and its title is linked to its content by aria-describedby
-- Section title must be provided `titleLevel` property
+- Section title must be provided `level` property
 
 ## Related components
 
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.html
index 1b0bbf27f..35d4e496d 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.html
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.html
@@ -15,9 +15,17 @@
   <div class="fudis-section__header" [id]="_headingId">
     <div class="fudis-section__header__container">
       <div class="fudis-section__header__heading">
-        <fudis-heading [marginBottom]="'none'" [level]="titleLevel" [size]="titleSize">{{
-          title
-        }}</fudis-heading>
+        <fudis-heading [marginBottom]="'none'" [level]="level" [size]="titleSize"
+          >{{ title
+          }}<ng-container *ngIf="badge && badgeText">
+            <fudis-badge
+              class="fudis-section__header__heading__badge"
+              [variant]="badge"
+              [content]="badgeText"
+            >
+            </fudis-badge>
+          </ng-container>
+        </fudis-heading>
         <ng-container *ngIf="tooltip">
           <fudis-button
             class="fudis-section__header__heading__tooltip"
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.scss b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.scss
index f8fe75df1..4a32edd4e 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.scss
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.scss
@@ -9,6 +9,10 @@
       display: flex;
       align-items: center;
 
+      &__badge {
+        margin-left: spacing.$spacing-xs;
+      }
+
       &__tooltip {
         margin-left: spacing.$spacing-xs;
       }
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts
index cd74f8eaa..b8f098fbd 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts
@@ -31,7 +31,7 @@ import { getElement, sortClasses } from '../../utilities/tests/utilities';
   template: `<fudis-section
     [title]="title"
     [titleSize]="titleSize"
-    [titleLevel]="titleLevel"
+    [level]="level"
     [classes]="classes"
     [tooltip]="tooltip"
     [tooltipToggle]="tooltipToggle"
@@ -53,7 +53,7 @@ import { getElement, sortClasses } from '../../utilities/tests/utilities';
 class MockFudisSectionComponent {
   title: string = 'This is section title';
   titleSize: FudisHeadingSize = 'lg';
-  titleLevel: FudisHeadingLevel = 2;
+  level: FudisHeadingLevel = 2;
   classes: string[];
   tooltip: string = 'This is tooltip in section';
   tooltipToggle: boolean = false;
@@ -109,7 +109,7 @@ describe('SectionComponent', () => {
   }
 
   function sectionTitleLevelCheck(level: FudisHeadingLevel): void {
-    mockComponent.titleLevel = level;
+    mockComponent.level = level;
     mockFixture.detectChanges();
 
     const headingElement = mockFixture.nativeElement.querySelector('fudis-heading');
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts
index 7b756e5dd..09df861fe 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts
@@ -16,7 +16,7 @@ import { ContentDirective } from '../../directives/content-projection/content/co
 import { FudisGridWidth, FudisGridAlign } from '../../types/grid';
 
 import { TooltipApiDirective } from '../../directives/tooltip/tooltip-api.directive';
-import { FudisComponentChanges, FudisSpacing } from '../../types/miscellaneous';
+import { FudisBadgeVariant, FudisComponentChanges, FudisSpacing } from '../../types/miscellaneous';
 import { FudisInternalErrorSummaryService } from '../../services/form/error-summary/internal-error-summary.service';
 import { FudisFormErrorSummarySection } from '../../types/forms';
 import { ActionsDirective } from '../../directives/content-projection/actions/actions.directive';
@@ -66,13 +66,23 @@ export class SectionComponent extends TooltipApiDirective implements OnInit, OnC
   /**
    * Heading level for the section title
    */
-  @Input() titleLevel: FudisHeadingLevel = 2;
+  @Input() level: FudisHeadingLevel = 2;
 
   /**
    * Heading size for the section title
    */
   @Input() titleSize: FudisHeadingSize = 'lg';
 
+  /**
+   * Add badge to the section title
+   */
+  @Input() badge: FudisBadgeVariant | null;
+
+  /**
+   * Badge text
+   */
+  @Input() badgeText: string | null;
+
   /**
    * Maximum width of Grid. When viewport gets narrower, grid automatically adjusts to lower sizes.
    * xxl = Default value. Viewports of 1600px and larger
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts
index 255e5a396..a2069fb7c 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts
@@ -23,7 +23,18 @@ export default {
     },
   },
   argTypes: {
-    titleLevel: {
+    badge: {
+      options: ['accent', 'danger', 'primary', 'secondary', 'success'],
+      control: {
+        type: 'select',
+      },
+    },
+    badgeText: {
+      control: {
+        type: 'text',
+      },
+    },
+    level: {
       options: fudisHeadingLevelArray,
       control: { type: 'select' },
     },
@@ -41,7 +52,9 @@ const ExampleTemplate: StoryFn<SectionComponent> = (args: SectionComponent) => (
   template: html`<fudis-section
     [title]="title"
     [titleSize]="titleSize"
-    [titleLevel]="titleLevel"
+    [level]="level"
+    [badge]="badge"
+    [badgeText]="badgeText"
     [tooltip]="tooltip"
     [tooltipToggle]="tooltipToggle"
     [tooltipPosition]="tooltipPosition"
@@ -73,11 +86,13 @@ const ExampleTemplate: StoryFn<SectionComponent> = (args: SectionComponent) => (
 export const Example = ExampleTemplate.bind({});
 Example.args = {
   title: 'This is title of section',
-  titleLevel: 2,
+  level: 2,
   titleSize: 'xl',
   tooltip: 'More info about this section',
   tooltipToggle: false,
   tooltipPosition: 'below',
+  badge: 'primary',
+  badgeText: 'Example',
   align: 'start',
   marginTop: 'none',
   marginBottom: 'none',
@@ -95,7 +110,7 @@ const NestedExampleTemplate: StoryFn<SectionComponent> = (args: SectionComponent
   template: html`<fudis-section
     [title]="'Parent Section'"
     [titleSize]="'lg'"
-    [titleLevel]="2"
+    [level]="2"
     [width]="'md'"
   >
     // Empty Actions template, so that nested Actions will not be rendered to the parent!
@@ -107,12 +122,7 @@ const NestedExampleTemplate: StoryFn<SectionComponent> = (args: SectionComponent
         Actions is not rendered there.</fudis-body-text
       >
 
-      <fudis-section
-        [title]="'Nested Section'"
-        [marginTop]="'sm'"
-        [titleSize]="'sm'"
-        [titleLevel]="3"
-      >
+      <fudis-section [title]="'Nested Section'" [marginTop]="'sm'" [titleSize]="'sm'" [level]="3">
         <ng-template fudisActions [type]="'section'">
           <fudis-button [label]="'Nested Action button'" />
         </ng-template>
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Chrome-Big-Landscape-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Chrome-Big-Landscape-linux.png
index fdae6f803..703f1705e 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Chrome-Big-Landscape-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Chrome-Big-Landscape-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Chrome-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Chrome-linux.png
index 9ff9e36ed..ad3662e39 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Chrome-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Chrome-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Safari-Big-Landscape-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Safari-Big-Landscape-linux.png
index fb2fa4cdf..01be26575 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Safari-Big-Landscape-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Safari-Big-Landscape-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Safari-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Safari-linux.png
index 71b46598d..3d6d52c7a 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Safari-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-1-Mobile-Safari-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-1-chromium-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-1-chromium-linux.png
index 650479b3b..67f4abe70 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-1-chromium-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-1-chromium-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-1-firefox-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-1-firefox-linux.png
index dae052d8d..abb7e841b 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-1-firefox-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-1-firefox-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-1-webkit-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-1-webkit-linux.png
index 86000cab5..bc7cd8cb1 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-1-webkit-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-1-webkit-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Chrome-Big-Landscape-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Chrome-Big-Landscape-linux.png
index 3333f9018..c0c391992 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Chrome-Big-Landscape-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Chrome-Big-Landscape-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Chrome-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Chrome-linux.png
index 29df7c574..720ff3247 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Chrome-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Chrome-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Safari-Big-Landscape-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Safari-Big-Landscape-linux.png
index 80dbb35d4..53ca9e86b 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Safari-Big-Landscape-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Safari-Big-Landscape-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Safari-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Safari-linux.png
index 0628a7f0d..d0bad534f 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Safari-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-2-Mobile-Safari-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-2-chromium-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-2-chromium-linux.png
index ab04d4b18..454031027 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-2-chromium-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-2-chromium-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-2-firefox-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-2-firefox-linux.png
index b9cf3d0ed..39eb5db53 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-2-firefox-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-2-firefox-linux.png differ
diff --git a/test/visual-regression/section.spec.ts-snapshots/section-default-2-webkit-linux.png b/test/visual-regression/section.spec.ts-snapshots/section-default-2-webkit-linux.png
index cc1dd8d41..2c6df11dd 100644
Binary files a/test/visual-regression/section.spec.ts-snapshots/section-default-2-webkit-linux.png and b/test/visual-regression/section.spec.ts-snapshots/section-default-2-webkit-linux.png differ