diff --git a/assets/js/theme/design-system/notes.js b/assets/js/theme/design-system/notes.js
new file mode 100644
index 0000000000000000000000000000000000000000..4fdc3f4b9a65b8c26b3ace7d8fd075826cdb8957
--- /dev/null
+++ b/assets/js/theme/design-system/notes.js
@@ -0,0 +1,48 @@
+class Note {
+    constructor (note) {
+        this.note = note;
+        this.active = false;
+        this.call = this.note.querySelector('.note__call');
+        this.call.addEventListener('click', this.toggle.bind(this));
+    }
+    toggle () {
+        if (this.active) {
+            this.deactivate();
+        } else  {
+            this.activate();
+        }
+    }
+    activate () {
+        this.deactivateAllNotes();
+        this.active = true;
+        this.note.classList.add('note--active');
+        this.definePosition();
+    }
+    deactivate () {
+        this.active = false;
+        this.note.classList.remove('note--active');
+    }
+    deactivateAllNotes () {
+        window.notes.forEach(note => {
+            note.deactivate();
+        })
+    }
+    definePosition () {
+        let isOnTheLeftSide = this.note.offsetLeft < (window.innerWidth / 2)
+        if (isOnTheLeftSide) {
+            this.note.classList.add('note--left');
+            this.note.classList.remove('note--right');
+        } else {
+            this.note.classList.add('note--right');
+            this.note.classList.remove('note--left');
+        }
+    }
+}
+
+(function () {
+    window.notes = [];
+    const notes = document.querySelectorAll(".note");
+    notes.forEach(note => {
+        window.notes.push(new Note(note));
+    })
+})();
\ No newline at end of file
diff --git a/assets/js/theme/index.js b/assets/js/theme/index.js
index 98f75c1c3f810d4ba5ca0751d677168bf82aa0a1..ff242d719855e0f272109f25bf5cbaf63fcf788f 100644
--- a/assets/js/theme/index.js
+++ b/assets/js/theme/index.js
@@ -4,6 +4,7 @@ import './design-system/dropdowns';
 import './design-system/font';
 import './design-system/mainMenu';
 import './design-system/modal';
+import './design-system/notes';
 import './design-system/search';
 import './design-system/toc';
 import './blocks/keyFigures';
diff --git a/assets/sass/_theme/design-system/notes.sass b/assets/sass/_theme/design-system/notes.sass
new file mode 100644
index 0000000000000000000000000000000000000000..908c6083cd2a67ef41b62cf189b733cd68bf7764
--- /dev/null
+++ b/assets/sass/_theme/design-system/notes.sass
@@ -0,0 +1,51 @@
+.note
+    position: relative
+    margin-left: pxToRem($space-unit)
+    &__call
+        background: $color-background-alt
+        border-radius: 4px
+        cursor: pointer
+        display: inline-block
+        line-height: 100%
+        min-width: $minimum-accessible-size
+        padding-left: $spacing-2
+        padding-right: $spacing-2
+        padding-bottom: 0
+        text-align: center
+        @include meta
+    &__content
+        background: $color-text
+        color: $color-background
+        display: none
+        max-width: 100vw
+        padding: $spacing-3
+        position: absolute
+        width: 450px
+        z-index: 999
+        @include small
+    &--active
+        .note__call
+            background: $color-text
+            color: $color-background
+            border-bottom-left-radius: 0
+            border-bottom-right-radius: 0
+        .note__content
+            display: block
+        @include media-breakpoint-up(desktop)
+            &__content
+                border-radius: 4px
+                top: pxToRem(25)
+            &--left
+                .note__content
+                    left: 0
+                    border-top-left-radius: 0
+            &--right
+                .note__content
+                    right: 0
+                    border-top-right-radius: 0
+        @include media-breakpoint-down(desktop)
+            position: inherit
+            .note__content
+                left: 0
+                right: 0
+                margin-top: pxToRem(-$space-unit)
\ No newline at end of file
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index c99d5465e5a26f6f80347faf510480321c234dff..19cddbd5fd91ebe1a4fb741efa69f91ab5541037 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -31,6 +31,7 @@
 @import design-system/image
 @import design-system/logo
 @import design-system/nav
+@import design-system/notes
 @import design-system/pagination
 @import design-system/search
 @import design-system/table