diff --git a/src/application/i18n/messages/en.json b/src/application/i18n/messages/en.json
index 5c39816e..1716f503 100644
--- a/src/application/i18n/messages/en.json
+++ b/src/application/i18n/messages/en.json
@@ -49,6 +49,27 @@
     "availabilityTitle": "Availability",
     "availabilityCaption": "Should the Note be available by its URL for people who knows it?",
     "availabilityRowTitle": "Note is published",
+    "appearance": "Appearance",
+    "sidebar": {
+      "title": "Sidebar",
+      "caption": "Choose how the sidebar is shown for this Note",
+      "hint": "Applies to this note for everyone who opens it, including readers of the published version.",
+      "parentOnly": "Sidebar settings are only available in the parent note's settings.",
+      "options": {
+        "none": {
+          "title": "No sidebar",
+          "subtitle": "Content only, full window"
+        },
+        "edge": {
+          "title": "Pinned to page edge",
+          "subtitle": "Sidebar sticks to the left of the window"
+        },
+        "content": {
+          "title": "Pinned to content",
+          "subtitle": "Sidebar follows the centered column"
+        }
+      }
+    },
     "inviteCollaboratorTitle": "Invite a collaborator",
     "inviteCollaboratorCaption": "Send this link to someone you want to add as an editor or reader.",
     "revokeHashButton": "Revoke",
diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index 75ba92d5..60ac55d9 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -200,14 +200,22 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   async function load(id: NoteId): Promise<void> {
     try {
-      const response = await noteService.getNoteById(id);
+      /**
+       * Load the note and its hierarchy in parallel so the sidebar position
+       * is known before the page is rendered, preventing a layout flash
+       */
+      const [response] = await Promise.all([
+        noteService.getNoteById(id),
+        getNoteHierarchy(id).catch(() => {
+          noteHierarchy.value = null;
+        }),
+      ]);
 
       note.value = response.note;
       canEdit.value = response.accessRights.canEdit;
       noteTools.value = response.tools;
       parentNote.value = response.parentNote;
       noteParents.value = response.parents;
-      void getNoteHierarchy(id);
     } catch (error) {
       deleteOpenedPageByUrl(route.path);
       if (error instanceof DomainError) {
diff --git a/src/application/services/useNoteSettings.ts b/src/application/services/useNoteSettings.ts
index bd488b3a..b2722ce4 100644
--- a/src/application/services/useNoteSettings.ts
+++ b/src/application/services/useNoteSettings.ts
@@ -1,5 +1,6 @@
 import { ref, type Ref } from 'vue';
 import type NoteSettings from '@/domain/entities/NoteSettings';
+import type { SidebarPosition } from '@/domain/entities/NoteSettings';
 import type { Note, NoteId } from '@/domain/entities/Note';
 import { noteSettingsService, noteService } from '@/domain';
 import type { UserId } from '@/domain/entities/User';
@@ -33,6 +34,13 @@ interface UseNoteSettingsComposableState {
    */
   updateIsPublic: (id: NoteId, newIsPublicValue: boolean) => Promise<void>;
 
+  /**
+   * Update sidebar position in note settings
+   * @param id - note id
+   * @param sidebarPosition - new sidebar position
+   */
+  updateSidebarPosition: (id: NoteId, sidebarPosition: SidebarPosition) => Promise<void>;
+
   /**
    * Revoke invitation hash
    * @param id - note id
@@ -124,6 +132,17 @@ export default function (): UseNoteSettingsComposableState {
     }
   }
 
+  /**
+   * Update sidebar position in note settings
+   * @param id - Note id
+   * @param sidebarPosition - new sidebar position
+   */
+  async function updateSidebarPosition(id: NoteId, sidebarPosition: SidebarPosition): Promise<void> {
+    const response = await noteSettingsService.patchNoteSettingsByNoteId(id, { sidebarPosition });
+
+    noteSettings.value = response;
+  }
+
   /**
    * Revoke invitation hash
    * @param id - Note id
@@ -213,6 +232,7 @@ export default function (): UseNoteSettingsComposableState {
     noteSettings,
     load,
     updateIsPublic,
+    updateSidebarPosition,
     revokeHash,
     changeRole,
     deleteNoteById,
diff --git a/src/domain/entities/NoteHierarchy.ts b/src/domain/entities/NoteHierarchy.ts
index 9fc178c6..8d6b78f4 100644
--- a/src/domain/entities/NoteHierarchy.ts
+++ b/src/domain/entities/NoteHierarchy.ts
@@ -1,4 +1,5 @@
 import { type NoteId } from './Note';
+import type { SidebarPosition } from './NoteSettings';
 
 /**
  * Note Tree entity
@@ -15,6 +16,11 @@ export interface NoteHierarchy {
    */
   noteTitle: string;
 
+  /**
+   * Position of the sidebar relative to the note content
+   */
+  sidebarPosition: SidebarPosition;
+
   /**
    * child notes
    */
diff --git a/src/domain/entities/NoteSettings.ts b/src/domain/entities/NoteSettings.ts
index 93b1551b..d3fe570a 100644
--- a/src/domain/entities/NoteSettings.ts
+++ b/src/domain/entities/NoteSettings.ts
@@ -5,6 +5,11 @@ import type { Team } from './Team';
  */
 export type InvitationHash = string;
 
+/**
+ * Position of the sidebar relative to the note content
+ */
+export type SidebarPosition = 'content' | 'edge' | 'none';
+
 /**
  * NoteSettings entity
  */
@@ -38,4 +43,9 @@ export default interface NoteSettings {
    * Note cover image id
    */
   cover: string;
+
+  /**
+   * Position of the sidebar, 'content' by default
+   */
+  sidebarPosition: SidebarPosition;
 }
diff --git a/src/presentation/components/noteSettings/NoteSidebarSetting.vue b/src/presentation/components/noteSettings/NoteSidebarSetting.vue
new file mode 100644
index 00000000..1c55c0b2
--- /dev/null
+++ b/src/presentation/components/noteSettings/NoteSidebarSetting.vue
@@ -0,0 +1,355 @@
+<template>
+  <Section
+    :title="t('noteSettings.sidebar.title')"
+    :caption="t('noteSettings.sidebar.hint')"
+    :with-background="false"
+  >
+    <div
+      :class="['sidebar-setting', { 'sidebar-setting--disabled': disabled }]"
+    >
+      <div
+        v-for="option in options"
+        :key="option.value"
+        :class="['sidebar-setting__card', { 'sidebar-setting__card--selected': sidebarPosition === option.value }]"
+        @click="select(option.value)"
+      >
+        <div
+          :class="[
+            'sidebar-setting__preview',
+            { 'sidebar-setting__preview--edge': option.value === 'edge' },
+          ]"
+        >
+          <!-- No sidebar -->
+          <template v-if="option.value === 'none'">
+            <div class="sidebar-setting__content">
+              <div
+                class="sidebar-setting__line sidebar-setting__line--heading"
+                style="width: 64px"
+              />
+              <div class="sidebar-setting__line" />
+              <div class="sidebar-setting__line" />
+              <div
+                class="sidebar-setting__line"
+                style="width: 60px"
+              />
+            </div>
+          </template>
+
+          <!-- Pinned to page edge -->
+          <template v-else-if="option.value === 'edge'">
+            <div class="sidebar-setting__bar sidebar-setting__bar--edge">
+              <div class="sidebar-setting__line sidebar-setting__line--bar" />
+              <div
+                class="sidebar-setting__line sidebar-setting__line--bar"
+                style="width: 16px"
+              />
+              <div
+                class="sidebar-setting__line sidebar-setting__line--bar"
+              />
+            </div>
+            <div class="sidebar-setting__preview-inner">
+              <div class="sidebar-setting__content sidebar-setting__content--compact">
+                <div
+                  class="sidebar-setting__line sidebar-setting__line--heading"
+                  style="width: 52px"
+                />
+                <div class="sidebar-setting__line" />
+                <div class="sidebar-setting__line" />
+                <div
+                  class="sidebar-setting__line"
+                  style="width: 48px"
+                />
+              </div>
+            </div>
+          </template>
+
+          <!-- Pinned to content -->
+          <template v-else>
+            <div class="sidebar-setting__bar">
+              <div class="sidebar-setting__line sidebar-setting__line--bar" />
+              <div
+                class="sidebar-setting__line sidebar-setting__line--bar"
+                style="width: 16px"
+              />
+              <div
+                class="sidebar-setting__line sidebar-setting__line--bar"
+              />
+            </div>
+            <div class="sidebar-setting__content sidebar-setting__content--compact">
+              <div
+                class="sidebar-setting__line sidebar-setting__line--heading"
+                style="width: 52px"
+              />
+              <div class="sidebar-setting__line" />
+              <div class="sidebar-setting__line" />
+              <div
+                class="sidebar-setting__line"
+                style="width: 48px"
+              />
+            </div>
+          </template>
+        </div>
+
+        <div class="sidebar-setting__label">
+          <div :class="['sidebar-setting__dot', { 'sidebar-setting__dot--selected': sidebarPosition === option.value }]">
+            <div class="sidebar-setting__dot-inner" />
+          </div>
+          <div class="sidebar-setting__text">
+            <span class="sidebar-setting__title">{{ t(option.title) }}</span>
+            <span class="sidebar-setting__subtitle">{{ t(option.subtitle) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p
+      v-if="disabled"
+      class="sidebar-setting__unavailable"
+    >
+      {{ t('noteSettings.sidebar.parentOnly') }}
+    </p>
+  </Section>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { Section } from '@codexteam/ui/vue';
+import type { SidebarPosition } from '@/domain/entities/NoteSettings';
+
+type SidebarOptionValue = SidebarPosition;
+
+interface SidebarOption {
+  value: SidebarOptionValue;
+  title: string;
+  subtitle: string;
+}
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  /**
+   * Sidebar position loaded from note settings
+   */
+  sidebarPosition: SidebarOptionValue;
+
+  /**
+   * Whether the sidebar position cannot be changed, e.g. for child notes
+   */
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Fires when the sidebar position changes
+   */
+  (event: 'update:sidebarPosition', value: SidebarOptionValue): void;
+}>();
+
+const options: SidebarOption[] = [
+  {
+    value: 'none',
+    title: 'noteSettings.sidebar.options.none.title',
+    subtitle: 'noteSettings.sidebar.options.none.subtitle',
+  },
+  {
+    value: 'edge',
+    title: 'noteSettings.sidebar.options.edge.title',
+    subtitle: 'noteSettings.sidebar.options.edge.subtitle',
+  },
+  {
+    value: 'content',
+    title: 'noteSettings.sidebar.options.content.title',
+    subtitle: 'noteSettings.sidebar.options.content.subtitle',
+  },
+];
+
+/**
+ * Select and persist a sidebar position through the parent component
+ *
+ * @param value - selected sidebar position
+ */
+function select(value: SidebarOptionValue): void {
+  if (props.disabled) {
+    return;
+  }
+
+  emit('update:sidebarPosition', value);
+}
+</script>
+
+<style setup lang="postcss" scoped>
+.sidebar-setting {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+
+  &--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &__card {
+    flex: 1;
+    cursor: pointer;
+    border-radius: 8px;
+    background: var(--base--bg-primary);
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    box-shadow: inset 0 0 0 1px var(--base--border);
+
+    &--selected {
+      box-shadow: inset 0 0 0 2px rgba(221, 32, 88, 1);
+    }
+
+    &:hover:not(&--selected) {
+      background: var(--base--bg-secondary-hover);
+    }
+  }
+
+  &__preview {
+    height: 100px;
+    border-radius: 6px;
+    background: var(--base--solid-secondary);
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 10px;
+    padding: 10px;
+
+    &--edge {
+      padding: 0;
+      gap: 0;
+    }
+  }
+
+  &__preview-inner {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  &__content {
+    width: 88px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding-top: 4px;
+
+    &--compact {
+      width: 74px;
+    }
+  }
+
+  &__line {
+    height: 5px;
+    border-radius: 2px;
+    background: rgba(116, 126, 136, 0.4);
+
+    &--heading {
+      height: 7px;
+      background: rgba(116, 126, 136, 0.75);
+    }
+
+    &--bar {
+      height: 4px;
+      width: 24px;
+      background: rgba(221, 32, 88, 0.55);
+
+      &:first-child {
+        width: auto;
+        background: rgba(221, 32, 88, 0.85);
+      }
+
+      &:last-child {
+        width: auto;
+      }
+    }
+  }
+
+  &__bar {
+    width: 38px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 5px;
+    padding-top: 4px;
+
+    &--edge {
+      background: rgba(221, 32, 88, 0.16);
+      border-right: 1px solid rgba(221, 32, 88, 0.45);
+      padding: 10px 8px;
+      align-self: stretch;
+      box-sizing: border-box;
+    }
+  }
+
+  &__label {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: flex-start;
+  }
+
+  &__dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin-top: 1px;
+    box-shadow: inset 0 0 0 1.5px var(--base--text-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--selected {
+      box-shadow: inset 0 0 0 1.5px rgba(221, 32, 88, 1);
+    }
+
+    &-inner {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: transparent;
+    }
+
+    &--selected .sidebar-setting__dot-inner {
+      background: rgba(221, 32, 88, 1);
+    }
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__title {
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    line-height: 1.2;
+    color: var(--base--text);
+  }
+
+  &__subtitle {
+    font-size: 12px;
+    line-height: 1.35;
+    color: var(--base--text-secondary);
+  }
+
+  &__unavailable {
+    margin: var(--spacing-m) 0 0;
+    font-size: 14px;
+    line-height: 1.4;
+    text-align: center;
+    color: var(--base--text-secondary);
+  }
+}
+</style>
diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index d04c68a5..66fbff2a 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -44,11 +44,16 @@
     </div>
     <div v-else>
       <PageBlock>
-        <template #left>
-          <VerticalMenu
-            class="menu"
-            :items="[verticalMenuItems]"
-          />
+        <template
+          v-if="sidebarPosition !== 'none'"
+          #left
+        >
+          <div :class="['note-sidebar', { 'note-sidebar--edge': sidebarPosition === 'edge' }]">
+            <VerticalMenu
+              class="menu"
+              :items="[verticalMenuItems]"
+            />
+          </div>
         </template>
         <template #default>
           <Editor
@@ -77,6 +82,7 @@ import { useNoteEditor } from '@/application/services/useNoteEditor';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
 import BreadCrumbs from '@/presentation/components/breadcrumbs/BreadCrumbs.vue';
 import { NoteHierarchy } from '@/domain/entities/NoteHierarchy';
+import type { SidebarPosition } from '@/domain/entities/NoteSettings';
 import { getTimeFromNow } from '@/infrastructure/utils/date.ts';
 
 const { t } = useI18n();
@@ -131,6 +137,11 @@ const { isEditorReady, editorConfig } = useNoteEditor({
   canEdit,
 });
 
+/**
+ * Position of the note sidebar on the page, resolved from the note hierarchy
+ */
+const sidebarPosition = computed<SidebarPosition>(() => noteHierarchy.value?.sidebarPosition ?? 'content');
+
 /**
  * Editor component reference
  */
@@ -236,6 +247,21 @@ watch(noteTitle, () => {
   width: auto;
 }
 
+/**
+ * 'edge' position: pin the sidebar to the window, it does not scroll with the content.
+ * Top padding places it just below the page header
+ */
+.note-sidebar--edge {
+  position: fixed;
+  left: 0;
+  top: var(--layout-navbar-height);
+  bottom: 0;
+  width: var(--layout-sidebar-width);
+  box-sizing: border-box;
+  padding: calc(var(--layout-navbar-height) + var(--spacing-s)) var(--spacing-ml) var(--spacing-xxl);
+  overflow-y: auto;
+}
+
 .last_edit {
   color: var(--base--text-secondary);
   padding-right: var(--h-padding);
diff --git a/src/presentation/pages/NoteSettings.vue b/src/presentation/pages/NoteSettings.vue
index f2cbccc6..b47cb1af 100644
--- a/src/presentation/pages/NoteSettings.vue
+++ b/src/presentation/pages/NoteSettings.vue
@@ -63,6 +63,15 @@
           </Row>
         </Section>
 
+        <Fieldset
+          :title="t('noteSettings.appearance')"
+        >
+          <NoteSidebarSetting
+            v-model:sidebar-position="sidebarPosition"
+            :disabled="parentNote !== undefined"
+          />
+        </Fieldset>
+
         <Fieldset
           :title="t('noteSettings.teamFormFieldSetTitle')"
         >
@@ -110,9 +119,11 @@ import { Section, Row, Switch, Button, Heading, Fieldset, Input, Card, PageBlock
 import { getTitle } from '@/infrastructure/utils/note';
 import { getTimeFromNow } from '@/infrastructure/utils/date';
 import InviteLink from '@/presentation/components/noteSettings/InviteLink.vue';
+import NoteSidebarSetting from '@/presentation/components/noteSettings/NoteSidebarSetting.vue';
 import useNavbar from '@/application/services/useNavbar';
 import { useRoute } from 'vue-router';
 import { TeamMember } from '@/domain/entities/Team';
+import type { SidebarPosition } from '@/domain/entities/NoteSettings';
 
 const { t } = useI18n();
 
@@ -125,7 +136,7 @@ const props = defineProps<{
 
 const { patchOpenedPageByUrl } = useNavbar();
 const route = useRoute();
-const { noteSettings, load: loadSettings, updateIsPublic, deleteNoteById, parentNote, setParent } = useNoteSettings();
+const { noteSettings, load: loadSettings, updateIsPublic, updateSidebarPosition, deleteNoteById, parentNote, setParent } = useNoteSettings();
 const { noteTitle, unlinkParent } = useNote({
   id: props.id,
 });
@@ -186,6 +197,16 @@ async function changeAccess() {
   updateIsPublic(props.id, !noteSettings.value!.isPublic);
 }
 
+/**
+ * Current sidebar position of the note
+ */
+const sidebarPosition = computed<SidebarPosition>({
+  get: () => noteSettings.value?.sidebarPosition ?? 'content',
+  set: (value) => {
+    void updateSidebarPosition(props.id, value);
+  },
+});
+
 /**
  * Construct the parent note URL. If the parent note is not set, return an empty string
  *