diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 33bdf3f..a8c4146 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1,7 +1,7 @@
 .action-row {
   @extend .d-flex;
   @extend .p-2;
-  @extend .mt-3;
+  @extend .mt-5;
 
   // background-color: map-get($theme-colors, "primary");
   background-color: var(--bs-tertiary-bg);
diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb
index dbd4a59..4bbee18 100644
--- a/app/controllers/pages_controller.rb
+++ b/app/controllers/pages_controller.rb
@@ -59,6 +59,6 @@ class PagesController < ApplicationController
 
     # Only allow a list of trusted parameters through.
     def page_params
-      params.require(:page).permit(:position, :path, :url, :report_id)
+      params.require(:page).permit(:position, :path, :url, :notes, :position)
     end
 end
diff --git a/app/javascript/controllers/unsaved_changes_controller.js b/app/javascript/controllers/unsaved_changes_controller.js
index e3ae242..29b198d 100644
--- a/app/javascript/controllers/unsaved_changes_controller.js
+++ b/app/javascript/controllers/unsaved_changes_controller.js
@@ -4,14 +4,21 @@ const LEAVE_ALERT = "Es gibt ungespeicherte Änderungen! Wirklich verlassen?"
 
 // Connects to data-controller="unsaved-changes"
 export default class extends Controller {
+  static targets = ["cancel"]
+
   initialState = null
 
   connect() {
     this.initialState = this.formState()
+    console.log(this.cancelTargets)
 
     window.addEventListener("beforeunload", (event) => this.leavingPage(event))
     document.addEventListener('turbo:before-visit', (e) => this.leavingPage(e))
     this.element.addEventListener("submit", (_) => this.initialState = null)
+    this.cancelTargets.forEach(element => {
+      console.log(element)
+      element.addEventListener("onclick", (_) => this.initialState = null)
+    });
   }
 
   formState() {
diff --git a/app/models/element.rb b/app/models/element.rb
index f9f3dd3..807c4b6 100644
--- a/app/models/element.rb
+++ b/app/models/element.rb
@@ -8,6 +8,8 @@ class Element < ApplicationRecord
 
   delegate :report, to: :page
 
+  after_validation :set_position
+
   # Calculate actual conformity level:
   # - if a success_criterion has result :failed -> the confirmity_level
   #   of that success_criterion is not reached.
@@ -30,4 +32,9 @@ class Element < ApplicationRecord
   def max_level
     @max_level ||= success_criteria.reject(&:not_applicable?).max(&:level)
   end
+
+  def set_position
+    Rails.logger.debug("element: position #{position}")
+    self.position ||= (page.elements.pluck(:position).max || 0) + 1
+  end
 end
diff --git a/app/models/page.rb b/app/models/page.rb
index aed1df3..c572735 100644
--- a/app/models/page.rb
+++ b/app/models/page.rb
@@ -3,4 +3,11 @@ class Page < ApplicationRecord
   has_many :elements, dependent: :destroy
 
   has_rich_text :comment
+
+  before_validation :set_position
+
+  private
+  def set_position
+    self.position ||= (report.pages.pluck(:position).max || 0) + 1
+  end
 end
diff --git a/app/models/success_criterion.rb b/app/models/success_criterion.rb
index 0165c4d..218bb49 100644
--- a/app/models/success_criterion.rb
+++ b/app/models/success_criterion.rb
@@ -14,6 +14,8 @@ class SuccessCriterion < ApplicationRecord
   enum :result, %i[passed failed not_applicable]
   enum :level, %i[A AA AAA]
 
+  before_save :set_position
+
   def level_value
     return nil unless level
 
@@ -23,4 +25,10 @@ class SuccessCriterion < ApplicationRecord
   def header
     "HEADER"
   end
+
+  private
+  def set_position
+    self.position ||= (element.success_criteria.pluck(:position).max || 0) + 1
+    Rails.logger.debug("set position: "+position.to_s)
+  end
 end
diff --git a/app/views/backoffice/show.html.erb b/app/views/backoffice/show.html.erb
index a2e52d1..c16d394 100644
--- a/app/views/backoffice/show.html.erb
+++ b/app/views/backoffice/show.html.erb
@@ -13,13 +13,13 @@
 <%= link_to Check.model_name.human(count: Check.count), :checks %>
 </p>
 
-<p>
+<p class="mb-3">
 <i class="bi bi-link"></i>
 <%= Link.count %>
 <%= link_to Link.model_name.human(count: Link.count), :links %>
 </p>
 
-<h2 class="mt-3">Backup</h2>
+<h2>Backup</h2>
 <ul class="ps-0" style="list-style-type: none">
   <li>
     <%= link_to "XLSX Backup herunterladen", admin_backup_url(format: :xlsx), class: " ", data: { turbo_prefetch: false, frame: "_top", turbo: false } %>
diff --git a/app/views/checklists/show.html.erb b/app/views/checklists/show.html.erb
index 3178363..1de7f4e 100644
--- a/app/views/checklists/show.html.erb
+++ b/app/views/checklists/show.html.erb
@@ -2,7 +2,7 @@
 
 <div class="row">
   <div class="col col-12 col-lg-8">
-    <div class="mt-3">
+    <div>
       <%= link_to tag.i(class: "bi bi-plus-lg"), new_checklist_entry_path(checklist_id: @checklist.id), class: "btn btn-primary float-end", data: { turbo_frame: "checklist_entries"  } %>
       <h2>Checks</h2>
     </div>
diff --git a/app/views/elements/_element.html.erb b/app/views/elements/_element.html.erb
index e74b56d..9bf42c3 100644
--- a/app/views/elements/_element.html.erb
+++ b/app/views/elements/_element.html.erb
@@ -1,9 +1,10 @@
-<div id="<%= dom_id element %>" class="<%= "mt-5" unless element == element.page.elements.first %>">
+<div id="<%= dom_id element %>" class="mb-5">
   <%= turbo_frame_tag dom_id(element, :frame) do %>
     <div class="d-flex">
       <h2 class="h4">
           <i class="bi bi-boxes">
           </i>
+        <%= element.page.position %>.<%= element.position %>
         <%= element.title %>
     </h2>
         <%= link_to [:edit, element], class: "btn btn-link text-secondary" do %>
@@ -18,7 +19,7 @@
 
   <% end %>
 
-  <div id="<%= dom_id(element, :success_criteria_list) %>">
+  <div id="<%= dom_id(element, :success_criteria_list) %>" class="mb-3">
     <% element.success_criteria.each do |sc| %>
       <%= render sc %>
     <% end %>
@@ -27,7 +28,7 @@
     <% end %>
   </div>
 
-  <div class="pt-3">
+  <div>
     <%= turbo_frame_tag dom_id(element, "new_success_criterion_frame") do %>
       <%= render partial: "elements/new_success_criterion_button", locals: { element: element } %>
     <% end %>
diff --git a/app/views/elements/_form.html.erb b/app/views/elements/_form.html.erb
index d5df2e7..c53ca03 100644
--- a/app/views/elements/_form.html.erb
+++ b/app/views/elements/_form.html.erb
@@ -1,4 +1,4 @@
-<%= bootstrap_form_with(model: element.persisted? ? element : [:page, element], data: element.persisted? || { turbo_frame: "_top" }) do |form| %>
+<%= bootstrap_form_with(model: element.persisted? ? element : [:page, element]) do |form| %>
   <%= form.hidden_field :page_id %>
   <%= form.text_field :title %>
   <%= form.rich_text_area :description %>
diff --git a/app/views/pages/_form.html.erb b/app/views/pages/_form.html.erb
deleted file mode 100644
index ebc707d..0000000
--- a/app/views/pages/_form.html.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-<%= bootstrap_form_with(model: [:report, page], data: { turbo: false }) do |form| %>
-    <%= form.text_field :path %>
-    <%= form.text_field :url %>
-    <%# <%= form.rich_text_area :comment %>
-  <%= form.submit %>
-<% end %>
diff --git a/app/views/pages/_form.html.slim b/app/views/pages/_form.html.slim
new file mode 100644
index 0000000..2a157f2
--- /dev/null
+++ b/app/views/pages/_form.html.slim
@@ -0,0 +1,5 @@
+= bootstrap_form_with(model: [:report, page], data: { "turbo-frame": :nav }) do |form|
+  = form.text_field :path
+  = form.text_field :url
+  = form.submit
+  = link_to("Abbrechen", report_path(@page.report), class: "btn btn-outline-secondary")
diff --git a/app/views/pages/_notes.html.slim b/app/views/pages/_notes.html.slim
new file mode 100644
index 0000000..e7814f3
--- /dev/null
+++ b/app/views/pages/_notes.html.slim
@@ -0,0 +1,3 @@
+= bootstrap_form_with(model: page) do |form|
+  = form.text_area :notes, rows: [(page.notes&.count("\n") || 0) + 1, 10].max, placeholder: "Hier kannst du Notizen speichern. \n\nNotizen beziehen sich nur auf den aktuellen Pfad.", hide_label: true
+  = form.submit "Speichern"
\ No newline at end of file
diff --git a/app/views/pages/_page.html.erb b/app/views/pages/_page.html.erb
index 5fd7e50..cad0762 100644
--- a/app/views/pages/_page.html.erb
+++ b/app/views/pages/_page.html.erb
@@ -1,11 +1,14 @@
-<div id="<%= dom_id page %>">
+<div id="<%= dom_id page %>" class="mb-3">
+  <h2>
+    <i class="bi bi-file"></i>
+    <%= page.position %> <%= page.path %><small><%= page.url %></small></h2>
   <div id="element_list">
     <% page.elements.each do |element| %>
       <%= render element %>
     <% end %>
   </div>
 
-  <div class="pt-3">
+  <div>
     <%= turbo_frame_tag "new_element_frame" do %>
       <%= render partial: "pages/new_element_button", locals: { page: page } %>
     <% end %>
diff --git a/app/views/pages/new.html.erb b/app/views/pages/new.html.erb
index 3dac663..cdf2e3c 100644
--- a/app/views/pages/new.html.erb
+++ b/app/views/pages/new.html.erb
@@ -3,7 +3,6 @@
 <%= turbo_frame_tag "new_page_frame" do %>
   <div class="border border-info p-3">
     <%= render "form", page: @page %>
-    <%= link_to "Abbrechen", report_path(@page.report) %>
   </div>
 <% end %>
 
diff --git a/app/views/pages/show.html.erb b/app/views/pages/show.html.erb
deleted file mode 100644
index ab0f41b..0000000
--- a/app/views/pages/show.html.erb
+++ /dev/null
@@ -1,9 +0,0 @@
-<h1><%= t("scaffold.pagetitle_show", model: @page.class.model_name.human) %></h1>
-
-<%= render @page %>
-
-<div class="action-row">
-  <%= link_to t("scaffold.link_edit", model: @page.model_name.human), edit_page_path(@page) %>
-  <%= link_to t("scaffold.link_index", model: @page.model_name.human(count: 2)), report_pages_path(@page.report) %>
-  <%= button_to t("scaffold.link_destroy", model: @page.model_name.human), @page, method: :delete, class: "btn btn-outline-danger" %>
-</div>
diff --git a/app/views/pages/show.html.slim b/app/views/pages/show.html.slim
new file mode 100644
index 0000000..535d219
--- /dev/null
+++ b/app/views/pages/show.html.slim
@@ -0,0 +1,9 @@
+h1
+  = t("scaffold.pagetitle_show", model: @page.class.model_name.human)
+= render @page
+= turbo_frame_tag(dom_id(@page, :notes)) do 
+  = render partial: "pages/notes", locals: { page: @page }
+.action-row
+  = link_to t("scaffold.link_edit", model: @page.model_name.human), edit_page_path(@page)
+  = link_to t("scaffold.link_index", model: @page.model_name.human(count: 2)), report_pages_path(@page.report)
+  = button_to t("scaffold.link_destroy", model: @page.model_name.human), @page, method: :delete, class: "btn btn-outline-danger"
diff --git a/app/views/reports/_new_page_button.html.erb b/app/views/reports/_new_page_button.html.erb
index 02f99a0..c9cdae5 100644
--- a/app/views/reports/_new_page_button.html.erb
+++ b/app/views/reports/_new_page_button.html.erb
@@ -1 +1 @@
-<%= link_to "#{tag.i(class: "bi bi-plus-lg")} Neuer Pfad".html_safe, new_report_page_path(report), class: "btn btn-primary" %>
+<%= link_to "#{tag.i(class: "bi bi-plus-lg")} Neuer Pfad".html_safe, new_report_page_path(report), class: "btn btn-primary mb-3" %>
diff --git a/app/views/reports/show.html.slim b/app/views/reports/show.html.slim
index 90d0140..6e14462 100644
--- a/app/views/reports/show.html.slim
+++ b/app/views/reports/show.html.slim
@@ -1,22 +1,27 @@
 h1
   i.bi.bi-journal-text.me-2
   = @report.name
-p.small
+p.small.mb-2
   |  Erstellt am 
   = l(@report.created_at, format: :short)
   | , zuletzt bearbeitet am 
   = l(@report.updated_at, format: :short)
 - if @report.comment
-  .mt-2.mb-4.lead
+  .smb-4.lead
     = @report.comment
 = turbo_frame_tag "nav" do
   .row 
     .col-lg-3.col-md-6.col-sm-12
       nav.nav.nav-pills.flex-column.mb-3#page_list
         - @report.pages.each do |page|
-          = link_to(page.path, report_path(@report, page_id: page.id), class: "nav-link#{@current_page&.id == page.id ? " active" : nil  }")
+          /= link_to(report_path(@report, page_id: page.id), class: "nav-link#{@current_page&.id == page.id ? " active" : nil  }", data: { "turbo-action": :advance }) do
+            i.bi.bi-file
+            =< "#{page.position} #{page.path}"
+          = link_to(page.path, report_path(@report, page_id: page.id), class: "nav-link#{@current_page&.id == page.id ? " active" : nil  }", data: { "turbo-action": :advance })
       = turbo_frame_tag "new_page_frame" do
         = render partial: "reports/new_page_button", locals: { report: @report }
+      = turbo_frame_tag(dom_id(@current_page, :notes)) do 
+        = render partial: "pages/notes", locals: { page: @current_page }
     .col-lg-9.col-md-6.col-sm-12
       - if @current_page
           = render @current_page
diff --git a/app/views/reports/show.rtf.erb b/app/views/reports/show.rtf.erb
index 33bf8d8..9ac82f1 100644
--- a/app/views/reports/show.rtf.erb
+++ b/app/views/reports/show.rtf.erb
@@ -1,11 +1,11 @@
   <h1><i class="bi bi-journal-text me-2"></i><%= @report.name %></h1>
-  <p class="small">
+  <p class="small mb-3">
     Erstellt am <%= l(@report.created_at, format: :short) %>,
     zuletzt bearbeitet am <%= l(@report.updated_at, format: :short) %>
   </p>
 
   <% if @report.comment %>
-    <div class="mt-2 mb-4 lead">
+    <div class="mb-4 lead">
     <%= @report.comment %>
     </div>
   <% end %>
diff --git a/app/views/success_criteria/_form.html.erb b/app/views/success_criteria/_form.html.erb
index 09bfb50..358df48 100644
--- a/app/views/success_criteria/_form.html.erb
+++ b/app/views/success_criteria/_form.html.erb
@@ -1,10 +1,10 @@
 
-<div id="<%= dom_id success_criterion %>" class="card mt-3">
+<div id="<%= dom_id success_criterion %>" class="card mb-3">
   <%== render partial: "success_criteria/header", locals: { success_criterion: success_criterion } %>
   
   <div class="collapse show" id="collapseSuccessCriterion_<%= success_criterion.id %>">
     <div class="card-body">
-      <%= bootstrap_form_with(model: success_criterion.persisted? ? success_criterion : [:element, success_criterion], data: { controller: "unsaved-changes" }) do |form| %>
+      <%= bootstrap_form_with(model: success_criterion.persisted? ? success_criterion : [:element, success_criterion]) do |form| %>
         <div class="row">
           <div class="col">
             <div class="btn-group" role="group" aria-label="Resultat">
diff --git a/app/views/success_criteria/_header.html.erb b/app/views/success_criteria/_header.html.erb
index c82a109..bd2f36a 100644
--- a/app/views/success_criteria/_header.html.erb
+++ b/app/views/success_criteria/_header.html.erb
@@ -1,7 +1,7 @@
 <% edit_mode = action_name == "edit" %>
 <div class="card-header d-flex">
   <h3 
-    class="h5 mt-2"
+    class="h5"
     data-bs-toggle="collapse"
     href="#collapseSuccessCriterion_<%= success_criterion.id %>" 
     role="button" 
@@ -9,6 +9,7 @@
     aria-controls="collapseSuccessCriterion_<%= success_criterion.id %>"
     style="cursor: pointer">
     <i class="bi <%= success_criterion_result_icon_classes(success_criterion) %>"></i>
+    <%= success_criterion.page.position %>.<%= success_criterion.element.position %>.<%= success_criterion.position %>
     <%= success_criterion.title %> 
     <span class="badge rounded-pill text-bg-secondary">
       <%= success_criterion.level %>
diff --git a/app/views/success_criteria/_success_criterion.html.erb b/app/views/success_criteria/_success_criterion.html.erb
index 246fedc..573c929 100644
--- a/app/views/success_criteria/_success_criterion.html.erb
+++ b/app/views/success_criteria/_success_criterion.html.erb
@@ -1,6 +1,6 @@
 <%= turbo_frame_tag(dom_id(success_criterion, :frame)) do %>
   <% expanded = false unless defined?(expanded) %>
-  <div id="<%= dom_id success_criterion %>" class="card mt-3">
+  <div id="<%= dom_id success_criterion %>" class="card">
     <%== render partial: "success_criteria/header", locals: {success_criterion: success_criterion } %>
     
     <div class="collapse<%= " show" if expanded %>" id="collapseSuccessCriterion_<%= success_criterion.id %>">
@@ -31,7 +31,7 @@
         <%= success_criterion.quick_fail %>
         <%= success_criterion.quick_fix %>
         <% if success_criterion.test_comment.present? %>
-          <div class="comment mt-3"><%= success_criterion.test_comment %></div>
+          <div class="comment"><%= success_criterion.test_comment %></div>
         <% end %>
       </div>
     </div>
diff --git a/config/locales/activerecord.yml b/config/locales/activerecord.yml
index 9b48e55..013f68e 100644
--- a/config/locales/activerecord.yml
+++ b/config/locales/activerecord.yml
@@ -72,6 +72,8 @@ de-CH:
       report:
         name: Bezeichnung
         comment: Projektbeschreibung
+      page:
+        notes: Notizen
     models:
       account:
         one: Konto
diff --git a/db/migrate/20241101004644_add_position_to_success_criteria.rb b/db/migrate/20241101004644_add_position_to_success_criteria.rb
new file mode 100644
index 0000000..407328f
--- /dev/null
+++ b/db/migrate/20241101004644_add_position_to_success_criteria.rb
@@ -0,0 +1,8 @@
+class AddPositionToSuccessCriteria < ActiveRecord::Migration[7.2]
+  def change
+    add_column :success_criteria, :position, :integer, null: false
+    add_index :success_criteria, [:element_id, :position], unique: true
+    add_index :elements, [:page_id, :position], unique: true
+    add_index :pages, [:report_id, :position], unique: true
+  end
+end
diff --git a/db/migrate/20241101013336_change_position_on_elements.rb b/db/migrate/20241101013336_change_position_on_elements.rb
new file mode 100644
index 0000000..ca9e35e
--- /dev/null
+++ b/db/migrate/20241101013336_change_position_on_elements.rb
@@ -0,0 +1,5 @@
+class ChangePositionOnElements < ActiveRecord::Migration[7.2]
+  def change
+    change_column(:elements, :position, :integer, default: nil, null: false)
+  end
+end
diff --git a/db/migrate/20241101015725_add_notes_to_pages.rb b/db/migrate/20241101015725_add_notes_to_pages.rb
new file mode 100644
index 0000000..9af9898
--- /dev/null
+++ b/db/migrate/20241101015725_add_notes_to_pages.rb
@@ -0,0 +1,5 @@
+class AddNotesToPages < ActiveRecord::Migration[7.2]
+  def change
+    add_column :pages, :notes, :text
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 7d98e16..87e28a8 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.2].define(version: 2024_10_31_183755) do
+ActiveRecord::Schema[7.2].define(version: 2024_11_01_015725) do
   create_table "account_remember_keys", force: :cascade do |t|
     t.string "key", null: false
     t.datetime "deadline", null: false
@@ -124,7 +124,8 @@ ActiveRecord::Schema[7.2].define(version: 2024_10_31_183755) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.integer "page_id", null: false
-    t.integer "position", default: 0, null: false
+    t.integer "position", null: false
+    t.index ["page_id", "position"], name: "index_elements_on_page_id_and_position", unique: true
     t.index ["page_id"], name: "index_elements_on_page_id"
   end
 
@@ -153,6 +154,8 @@ ActiveRecord::Schema[7.2].define(version: 2024_10_31_183755) do
     t.integer "report_id", null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.text "notes"
+    t.index ["report_id", "position"], name: "index_pages_on_report_id_and_position", unique: true
     t.index ["report_id"], name: "index_pages_on_report_id"
   end
 
@@ -188,7 +191,9 @@ ActiveRecord::Schema[7.2].define(version: 2024_10_31_183755) do
     t.datetime "updated_at", null: false
     t.integer "check_id"
     t.integer "priority"
+    t.integer "position", null: false
     t.index ["check_id"], name: "index_success_criteria_on_check_id"
+    t.index ["element_id", "position"], name: "index_success_criteria_on_element_id_and_position", unique: true
     t.index ["element_id"], name: "index_success_criteria_on_element_id"
   end