diff --git a/app/assets/stylesheets/order_screen.scss b/app/assets/stylesheets/order_screen.scss
index ed42d879b..338190b1f 100644
--- a/app/assets/stylesheets/order_screen.scss
+++ b/app/assets/stylesheets/order_screen.scss
@@ -10,21 +10,28 @@
   height: 100vh;
 
   .flash {
+    position: fixed;
+    right: 1.5rem;
+    bottom: 1.5rem;
+    z-index: 1000;
     display: flex;
-    align-self: flex-end;
-    height: 100%;
+    min-width: 250px;
+    max-width: 450px;
+    height: auto;
     font-size: $font-size-lg;
     vertical-align: middle;
     color: $font-color-light;
     text-align: center;
     background-color: $gray-800;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
   }
 
   .flash-text {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 1rem;
+    padding: 1rem 1.5rem;
 
     a {
       &:hover {
@@ -112,6 +119,29 @@
     }
   }
 
+  .header-actions {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+
+  .header-slider {
+    display: flex;
+    align-items: center;
+    width: 150px;
+  }
+
+  .header-slider .form-range {
+    flex-grow: 1;
+    height: 0.5rem;
+  }
+
+  .header-slider label {
+    font-size: $font-size-sm;
+    color: $font-color-dark;
+    white-space: nowrap;
+  }
+
   .side-panel {
     z-index: 4;
     display: flex;
@@ -124,6 +154,12 @@
     background-color: $gray-200;
     border-right: 2px solid $gray-400;
     box-shadow: 2px 0 4px -2px $transparent-200;
+
+    &.edit-mode-disabled {
+      pointer-events: none;
+      user-select: none;
+      opacity: 0.5;
+    }
   }
 
   .user-details {
@@ -236,19 +272,37 @@
   .product-grid {
     display: grid;
     grid-area: product-grid;
-    grid-template-rows: auto;
-    grid-template-columns: repeat(4, 1fr);
+    grid-auto-flow: dense;
     gap: 2px;
     justify-content: flex-start;
     background-color: $gray-400;
   }
 
-  .product-grid-product {
+  .product-grid .grid-tile-back {
+    grid-row: 1;
+    grid-column: 1;
+  }
+
+  .products-container {
+    display: contents;
+  }
+
+  .grid-tile-back {
+    .grid-tile-name {
+      font-size: $font-size-lg;
+      color: $white;
+      text-shadow: none;
+    }
+  }
+
+  .grid-tile {
     display: flex;
     flex-flow: column nowrap;
     align-items: center;
     justify-content: center;
     cursor: pointer;
+    outline: none;
+    border: none;
     transition: filter 0.2s ease;
 
     &:hover {
@@ -256,15 +310,38 @@
     }
   }
 
-  .product-requires-age {
-    filter: brightness(0.7);
+  .grid-tile-product {
+    color: $font-color-dark;
+    text-align: center;
+    
+    &.product-requires-age {
+      filter: brightness(0.7);
 
-    &:hover {
-      filter: brightness(0.6);
+      &:hover {
+        filter: brightness(0.6);
+      }
+    }
+  }
+
+  .grid-tile-folder,
+  .grid-tile-back {
+    color: $white;
+    background-color: $gray-600;
+    
+    .grid-tile-name {
+      font-size: $font-size-lg;
+      color: $font-color-dark;
+      text-shadow: none;
     }
   }
 
-  .product-grid-product-name {
+  .grid-tile-name {
+    font-size: $font-size-lg;
+    color: $font-color-dark;
+    text-align: center;
+  }
+
+  .grid-tile-price {
     font-size: $font-size-lg;
     color: $font-color-dark;
     text-align: center;
@@ -279,4 +356,145 @@
     grid-area: order-grid;
     overflow-y: auto;
   }
+
+  .grid-tile-folder,
+  .grid-tile-back {
+    position: relative;
+    
+    .folder-icon {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0.5rem;
+      font-size: 3.5rem;
+    }
+
+    .folder-back-arrow {
+      position: absolute;
+      right: -0.5rem;
+      bottom: 0;
+      padding: 0.2rem;
+      font-size: 1rem;
+      color: $white;
+      background: rgb(0 0 0 / 50%);
+      border-radius: 50%;
+    }
+
+    &.edit-mode {
+      cursor: grab;
+    }
+  }
+
+  .grid-tile-back {
+    pointer-events: auto;
+    
+    .folder-icon {
+      font-size: 2rem;
+    }
+    
+    .grid-tile-name {
+      font-size: $font-size-lg;
+      color: $white;
+      text-shadow: none;
+    }
+  }
+
+  .folder-edit-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    font-size: 1.6rem;
+    color: $gray-700;
+    cursor: pointer;
+    background-color: rgb(255 255 255 / 90%);
+    border-radius: 50%;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: $white;
+      transform: scale(1.1);
+    }
+  }
+
+  .draggable {
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  .drag-handle {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    font-size: 1rem;
+    color: $gray-700;
+    cursor: grab;
+    opacity: 1;
+    transition: opacity 0.2s ease;
+  }
+
+  .sortable-ghost {
+    opacity: 0.4;
+  }
+
+  .sortable-chosen {
+    box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
+  }
+
+  .sortable-drag {
+    background-color: $white;
+  }
+
+  .folder-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1050;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgb(0 0 0 / 50%);
+  }
+
+  .folder-modal {
+    width: 90%;
+    max-width: 400px;
+    background-color: $white;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
+  }
+
+  .folder-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid $gray-300;
+
+    h5 {
+      margin: 0;
+    }
+  }
+
+  .folder-modal-body {
+    padding: 1rem;
+  }
+
+  .folder-modal-footer {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    padding: 1rem;
+    border-top: 1px solid $gray-300;
+  }
 }
\ No newline at end of file
diff --git a/app/controllers/activities_controller.rb b/app/controllers/activities_controller.rb
index b8cb77909..ab912f1a3 100644
--- a/app/controllers/activities_controller.rb
+++ b/app/controllers/activities_controller.rb
@@ -86,17 +86,26 @@ def destroy
   def order_screen # rubocop:disable Metrics/MethodLength, Metrics/AbcSize
     authorize Activity
 
-    @activity = Activity.includes([:price_list, { price_list: { product_price: :product } }])
+    @activity = Activity.includes([:price_list, { price_list: { product_prices: :product } }])
                         .find(params[:id])
 
     @product_prices_json = sorted_product_price(@activity).to_json(
+      only: %i[id price position product_price_folder_id],
       include: { product: { only: %i[id name category color], methods: %i[requires_age] } }
     )
 
+    @folders_json = @activity.price_list.product_price_folders.order(:position).to_json(
+      only: %i[id name position color]
+    )
+
     @users_json = users_hash.to_json
 
     @activity_json = @activity.to_json(only: %i[id title start_time end_time])
 
+    @is_treasurer = current_user.treasurer?
+    @price_list_id = @activity.price_list_id
+    @price_list_grid_size = @activity.price_list.grid_size
+
     @sumup_key = Rails.application.config.x.sumup_key
     @sumup_enabled = @sumup_key.present?
 
@@ -174,7 +183,7 @@ def users_hash
   end
 
   def sorted_product_price(activity)
-    activity.price_list.product_price.sort_by { |p| p.product.id }
+    activity.price_list.product_prices.includes(:product).order(:position)
   end
 
   def activity_params
diff --git a/app/controllers/errors_controller.rb b/app/controllers/errors_controller.rb
index d82ca2e85..830792772 100644
--- a/app/controllers/errors_controller.rb
+++ b/app/controllers/errors_controller.rb
@@ -15,8 +15,8 @@ def unacceptable
     render_error_page('errors/unacceptable', :not_acceptable, '406 Not Acceptable')
   end
 
-  def unprocessable_entity
-    render_error_page('errors/unprocessable_entity', :unprocessable_entity, '422 Unprocessable Entity')
+  def unprocessable_content
+    render_error_page('errors/unprocessable_content', :unprocessable_content, '422 Unprocessable Entity')
   end
 
   def internal_server_error
diff --git a/app/controllers/product_price_folders_controller.rb b/app/controllers/product_price_folders_controller.rb
new file mode 100644
index 000000000..b10e8db46
--- /dev/null
+++ b/app/controllers/product_price_folders_controller.rb
@@ -0,0 +1,80 @@
+class ProductPriceFoldersController < ApplicationController
+  before_action :authenticate_user!
+  before_action :set_price_list, only: %i[index create reorder]
+  before_action :set_folder, only: %i[update destroy]
+
+  after_action :verify_authorized
+
+  def index
+    authorize ProductPriceFolder, :index?
+    @folders = @price_list.product_price_folders.order(:position)
+    render json: @folders
+  end
+
+  def create
+    @folder = @price_list.product_price_folders.new(folder_params)
+    authorize @folder
+
+    if @folder.save
+      render json: @folder, status: :created
+    else
+      render json: { errors: @folder.errors.full_messages }, status: :unprocessable_content
+    end
+  end
+
+  def update
+    authorize @folder
+
+    if @folder.update(folder_params)
+      render json: @folder
+    else
+      render json: { errors: @folder.errors.full_messages }, status: :unprocessable_content
+    end
+  end
+
+  def destroy
+    authorize @folder
+
+    orphaned_products = @folder.product_prices
+    max_position = @folder.price_list.product_prices.without_folder.maximum(:position) || -1
+
+    orphaned_products.each_with_index do |product_prices, index|
+      product_prices.update(product_price_folder_id: nil, position: max_position + index + 1)
+    end
+
+    @folder.destroy
+
+    head :no_content
+  end
+
+  def reorder # rubocop:disable Metrics/MethodLength
+    authorize ProductPriceFolder, :reorder?
+
+    folder_positions = params.require(:folder_positions)
+
+    ActiveRecord::Base.transaction do
+      folder_positions.each do |folder_data|
+        folder = @price_list.product_price_folders.find(folder_data[:id])
+        folder.update!(position: folder_data[:position])
+      end
+    end
+
+    render json: { success: true }
+  rescue ActiveRecord::RecordInvalid => e
+    render json: { errors: [e.message] }, status: :unprocessable_content
+  end
+
+  private
+
+  def set_price_list
+    @price_list = PriceList.find(params[:price_list_id])
+  end
+
+  def set_folder
+    @folder = ProductPriceFolder.find(params[:id])
+  end
+
+  def folder_params
+    params.require(:product_price_folder).permit(policy(ProductPriceFolder.new).permitted_attributes)
+  end
+end
diff --git a/app/controllers/product_prices_controller.rb b/app/controllers/product_prices_controller.rb
new file mode 100644
index 000000000..dcfe61c14
--- /dev/null
+++ b/app/controllers/product_prices_controller.rb
@@ -0,0 +1,70 @@
+class ProductPricesController < ApplicationController
+  before_action :authenticate_user!
+  before_action :set_product_price, only: %i[assign_folder]
+  before_action :set_price_list, only: %i[reorder]
+
+  after_action :verify_authorized
+
+  def assign_folder # rubocop:disable Metrics/MethodLength, Metrics/AbcSize
+    authorize @product_price, :update?
+
+    folder_id = params[:folder_id]
+    position = params[:position]
+
+    if folder_id.present?
+      folder = ProductPriceFolder.find_by(id: folder_id)
+      return render json: { errors: ['Folder not found'] }, status: :unprocessable_content unless folder
+      unless folder.price_list_id == @product_price.price_list_id
+        return render json: { errors: ['Folder does not belong to the same price list'] }, status: :unprocessable_content
+      end
+    end
+
+    update_params = { product_price_folder_id: folder_id }
+    update_params[:position] = position if position.present?
+
+    if @product_price.update(update_params)
+      render json: @product_price, include: product_price_includes
+    else
+      render json: { errors: @product_price.errors.full_messages }, status: :unprocessable_content
+    end
+  end
+
+  def reorder # rubocop:disable Metrics/MethodLength, Metrics/AbcSize
+    product_positions = params.require(:product_positions)
+
+    ActiveRecord::Base.transaction do
+      product_positions.each do |product_data|
+        product_price = @price_list.product_prices.find(product_data[:id])
+        authorize product_price, :update?
+
+        if product_data[:folder_id].present? && !@price_list.product_price_folders.exists?(id: product_data[:folder_id])
+          raise ActiveRecord::RecordInvalid.new(product_price),
+                'Folder does not belong to this price list'
+        end
+
+        product_price.update!(
+          position: product_data[:position],
+          product_price_folder_id: product_data[:folder_id]
+        )
+      end
+    end
+
+    render json: { success: true }
+  rescue ActiveRecord::RecordInvalid => e
+    render json: { errors: [e.message] }, status: :unprocessable_content
+  end
+
+  private
+
+  def set_product_price
+    @product_price = ProductPrice.find(params[:id])
+  end
+
+  def set_price_list
+    @price_list = PriceList.find(params[:price_list_id])
+  end
+
+  def product_price_includes
+    { product: { only: %i[id name category color], methods: %i[requires_age] } }
+  end
+end
diff --git a/app/javascript/components/orderscreen/GridTile.vue b/app/javascript/components/orderscreen/GridTile.vue
new file mode 100644
index 000000000..f495dfdef
--- /dev/null
+++ b/app/javascript/components/orderscreen/GridTile.vue
@@ -0,0 +1,174 @@
+<template lang="html">
+  <div
+    class="grid-tile"
+    :class="{
+      'grid-tile-product': itemType === 'product',
+      'grid-tile-folder': itemType === 'folder',
+      'grid-tile-back': itemType === 'back',
+      'edit-mode': editMode,
+      'draggable': editMode && (itemType === 'product' || itemType === 'folder'),
+      'drop-target': draggedItem && draggedItemType === 'product' && (itemType === 'folder' || itemType === 'back'),
+      'product-requires-age': itemType === 'product' && selectedUser && selectedUser.minor && item.product.requires_age
+    }"
+    :style="tileStyle"
+    :draggable="editMode && (itemType === 'product' || itemType === 'folder')"
+    @click="handleClick"
+    @dragover="handleDragOver"
+    @drop="handleDrop"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd"
+    :data-item-id="itemId"
+    :data-item-type="itemType"
+  >
+    <span v-if="editMode && itemType !== 'back'" class="drag-handle">
+      <i class="fas fa-ellipsis-v"></i>
+    </span>
+    
+    <span v-if="editMode && itemType === 'folder'" class="folder-edit-btn" @click.stop="handleEdit">
+      <i class="fas fa-pen"></i>
+    </span>
+
+    <span v-if="itemType === 'product' && selectedUser && selectedUser.minor && item.product.requires_age" class="product-grid-product-requires-age mb-2 fa-stack">
+      <i class="fa fa-circle fa-circle-lighter fa-stack-2x"></i>
+      <span class="fa fa-stack-1x fa-inverse fa-plus18"></span>
+    </span>
+
+    <span class="grid-tile-name">
+      {{ displayName }}
+    </span>
+
+    <span v-if="itemType === 'product'" class="grid-tile-price">
+      {{ formattedPrice }}
+    </span>
+
+    <span v-if="itemType === 'folder' || itemType === 'back'" class="folder-icon">
+      <i v-if="itemType === 'folder'" class="fas fa-folder"></i>
+      <i v-if="itemType === 'back'" class="fas fa-folder-open"></i>
+      <i v-if="itemType === 'back'" class="fas fa-arrow-left folder-back-arrow"></i>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    itemType: {
+      type: String,
+      required: true,
+      validator: value => ['product', 'folder', 'back'].includes(value)
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    editMode: {
+      type: Boolean,
+      default: false
+    },
+    selectedUser: {
+      type: Object,
+      default: null
+    },
+    draggedItem: {
+      type: Object,
+      default: null
+    },
+    draggedItemType: {
+      type: String,
+      default: null
+    },
+    backgroundColor: {
+      type: String,
+      default: null
+    }
+  },
+
+  computed: {
+    itemId() {
+      return this.item.id || 'back';
+    },
+
+    displayName() {
+      if (this.itemType === 'back') return 'Terug';
+      if (this.itemType === 'folder') return this.item.name;
+      if (this.itemType === 'product') return this.item.product.name;
+      return '';
+    },
+
+    formattedPrice() {
+      if (this.itemType === 'product') {
+        return `€${parseFloat(this.item.price).toFixed(2)}`;
+      }
+      return '';
+    },
+
+    tileStyle() {
+      const style = {};
+      
+      if (this.backgroundColor) {
+        style.backgroundColor = this.backgroundColor;
+      } else if (this.itemType === 'folder' && this.item.color) {
+        style.backgroundColor = this.item.color;
+      } else if (this.itemType === 'product' && this.item.product && this.item.product.color) {
+        style.backgroundColor = this.item.product.color;
+      }
+      
+      return style;
+    }
+  },
+
+  methods: {
+    emitItemEvent(eventName, evt) {
+      this.$emit(eventName, {
+        evt,
+        itemType: this.itemType,
+        item: this.item
+      });
+    },
+
+    handleClick(evt) {
+      if (this.editMode) return;
+
+      evt.stopPropagation();
+
+      this.emitItemEvent('click', evt);
+    },
+
+    handleDragOver(evt) {
+      if (!this.editMode) return;
+
+      evt.preventDefault && evt.preventDefault();
+      evt.stopPropagation && evt.stopPropagation();
+
+      this.emitItemEvent('dragover', evt);
+    },
+
+    handleDrop(evt) {
+      if (!this.editMode) return;
+
+      evt.preventDefault && evt.preventDefault();
+      evt.stopPropagation && evt.stopPropagation();
+
+      this.emitItemEvent('drop', evt);
+    },
+
+    handleDragStart(evt) {
+      if (!this.editMode) return;
+
+      evt.dataTransfer.setData('text/plain', this.item.id);
+
+      this.emitItemEvent('dragstart', evt);
+    },
+
+    handleDragEnd() {
+      this.$emit('dragend');
+    },
+
+    handleEdit(evt) {
+      if (!this.editMode) return;
+
+      this.emitItemEvent('edit', evt);
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/app/javascript/order_screen.js b/app/javascript/order_screen.js
index f825a479f..ee8d30093 100644
--- a/app/javascript/order_screen.js
+++ b/app/javascript/order_screen.js
@@ -1,19 +1,25 @@
 import Vue from 'vue/dist/vue.esm';
 import api from './api/axiosInstance';
 import * as bootstrap from 'bootstrap';
+import Sortable from 'sortablejs';
 
 import FlashNotification from './components/FlashNotification.vue';
 import UserSelection from './components/orderscreen/UserSelection.vue';
 import ActivityOrders from './components/orderscreen/ActivityOrders.vue';
+import GridTile from './components/orderscreen/GridTile.vue';
 
 document.addEventListener('turbo:load', () => {
   const element = document.getElementById('order-screen');
   if (element != null) {
     const users = JSON.parse(element.dataset.users);
     const productPrices = JSON.parse(element.dataset.productPrices);
+    const folders = JSON.parse(element.dataset.folders || '[]');
     const activity = JSON.parse(element.dataset.activity);
     const flashes = JSON.parse(element.dataset.flashes);
     const depositButtonEnabled = element.dataset.depositButtonEnabled === 'true';
+    const isTreasurer = element.dataset.isTreasurer === 'true';
+    const priceListId = element.dataset.priceListId;
+    const priceListGridSize = parseInt(element.dataset.priceListGridSize || '4');
 
     window.flash = function(message, actionText, type) {
       const event = new CustomEvent('flash', { detail: { message: message, actionText: actionText, type: type } } );
@@ -32,6 +38,7 @@ document.addEventListener('turbo:load', () => {
         return {
           users: users,
           productPrices: productPrices,
+          folders: folders,
           activity: activity,
           selectedUser: null,
           payWithCash: false,
@@ -39,7 +46,21 @@ document.addEventListener('turbo:load', () => {
           keepUserSelected: false,
           depositButtonEnabled: depositButtonEnabled,
           orderRows: [],
-          isSubmitting: false
+          isSubmitting: false,
+          currentFolder: null,
+          editMode: false,
+          isTreasurer: isTreasurer,
+          priceListId: priceListId,
+          showFolderModal: false,
+          editingFolder: null,
+          folderForm: { name: '', color: '#6c757d' },
+          draggedItem: null,
+          draggedItemType: null,
+          draggedItemHandled: false,
+          sortableInstance: null,
+          gridSize: priceListGridSize,
+          gridSizeUpdateInProgress: false,
+          gridSizeUpdateTimeout: null
         };
       },
       methods: {
@@ -51,13 +72,32 @@ document.addEventListener('turbo:load', () => {
           return `€${parseFloat(price).toFixed(2)}`;
         },
 
+        isValidHexColor(color) {
+          return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
+        },
+
+        leaveOrderScreen() {
+          if (this.payWithCash) {
+            this.payWithCash = false;
+          } else if (this.payWithPin) {
+            this.payWithPin = false;
+          } else {
+            this.selectedUser = null;
+          }
+
+          this.currentFolder = null;
+          if (this.editMode) {
+            this.editMode = false;
+            this.destroySortable();
+          }
+        },
+
         setUser(user = null) {
           if (this.selectedUser === null || user === null || this.selectedUser.id != user.id) {
             this.orderRows = [];
           }
 
           if (user !== null) {
-            // Reload user to get latest credit balance
             api.get(`/users/${user.id}/json?activity_id=${this.activity.id}`).then((response) => {
               const refreshedUser = response.data;
               const index = this.users.findIndex((candidate) => candidate.id === refreshedUser.id);
@@ -78,6 +118,14 @@ document.addEventListener('turbo:load', () => {
           this.payWithCash = false;
           this.payWithPin = false;
           this.selectedUser = user;
+
+          if (user === null) {
+            this.currentFolder = null;
+            if (this.editMode) {
+              this.editMode = false;
+              this.destroySortable();
+            }
+          }
         },
 
         selectCash() {
@@ -182,7 +230,6 @@ document.addEventListener('turbo:load', () => {
             if(!this.keepUserSelected){
               this.setUser(null);
             } else {
-              // re-set user to update credit
               this.setUser(response.data.user);
               this.orderRows = [];
             }
@@ -247,6 +294,306 @@ document.addEventListener('turbo:load', () => {
             this.handleXHRError(response);
           });
         },
+
+        handleTileClick(payload) {
+          if (this.editMode || !payload) return;
+          
+          const itemType = payload.itemType;
+          const item = payload.item;
+          
+          if (itemType === 'folder') {
+            this.currentFolder = item;
+          } else if (itemType === 'back') {
+            this.currentFolder = null;
+          } else if (itemType === 'product') {
+            this.selectProduct(item);
+          }
+        },
+
+        handleTileEdit(payload) {
+          if (!this.editMode || !payload) return;
+          
+          const itemType = payload.itemType;
+          const item = payload.item;
+          
+          if (itemType === 'folder') {
+            this.openFolderModal(item);
+          }
+        },
+
+        handleDragOver(payload) {
+          // Allow drag over for drop targets
+          if (this.editMode && this.draggedItem && payload && (payload.itemType === 'folder' || payload.itemType === 'back')) {
+            if (payload.evt && payload.evt.dataTransfer) {
+              payload.evt.preventDefault();
+              payload.evt.dataTransfer.dropEffect = 'move';
+            }
+          }
+        },
+
+        toggleEditMode() {
+          this.editMode = !this.editMode;
+          if (this.editMode) {
+            this.$nextTick(() => {
+              this.initSortable();
+            });
+          } else {
+            this.destroySortable();
+          }
+        },
+
+        initSortable() {
+          const gridContainer = this.$refs.gridContainer;
+          if (gridContainer && !this.sortableInstance) {
+            this.sortableInstance = Sortable.create(gridContainer, {
+              animation: 250,
+              ghostClass: 'sortable-ghost',
+              chosenClass: 'sortable-chosen',
+              dragClass: 'sortable-drag',
+              forceFallback: false,
+              touchStartThreshold: 0,
+              delayOnTouchOnly: true,
+              filter: '.grid-tile-back',
+              draggable: '.grid-tile:not(.grid-tile-back)',
+              swapThreshold: 0.75,
+              fallbackOnBody: false,
+              fallbackTolerance: 0,
+              onEnd: this.onGridDragEnd.bind(this)
+            });
+          }
+        },
+
+        destroySortable() {
+          if (this.sortableInstance) {
+            this.sortableInstance.destroy();
+            this.sortableInstance = null;
+          }
+        },
+
+        onGridDragEnd(evt) {
+          // Skip if the dragged item was already handled by onDrop (folder/back drops)
+          if (this.draggedItemHandled) {
+            this.draggedItemHandled = false;
+            return;
+          }
+          
+          const positions = [];
+          const gridElements = evt.to.querySelectorAll('.grid-tile');
+          
+          gridElements.forEach((el, index) => {
+            const itemId = el.dataset.itemId;
+            const itemType = el.dataset.itemType;
+            
+            if (itemId && itemId !== 'back') {
+              if (itemType === 'folder') {
+                const folder = this.folders.find(f => f.id == itemId);
+                if (folder) {
+                  folder.position = index;
+                  positions.push({ 
+                    id: parseInt(itemId), 
+                    position: index,
+                    type: 'folder'
+                  });
+                }
+              } else if (itemType === 'product') {
+                const productPrice = this.productPrices.find(pp => pp.id == itemId);
+                if (productPrice) {
+                  productPrice.position = index;
+                  positions.push({ 
+                    id: parseInt(itemId), 
+                    position: index,
+                    type: 'product',
+                    folder_id: this.currentFolder ? this.currentFolder.id : null
+                  });
+                }
+              }
+            }
+          });
+
+          // Separate folder and product positions for API calls
+          const folderPositions = positions.filter(p => p.type === 'folder').map(p => ({ id: p.id, position: p.position }));
+          const productPositions = positions.filter(p => p.type === 'product').map(p => ({ id: p.id, position: p.position, folder_id: p.folder_id }));
+
+          if (folderPositions.length > 0) {
+            api.patch(`/price_lists/${this.priceListId}/product_price_folders/reorder`, {
+              folder_positions: folderPositions
+            }).catch((response) => {
+              this.handleXHRError(response);
+            });
+          }
+
+          if (productPositions.length > 0) {
+            api.patch(`/price_lists/${this.priceListId}/product_prices/reorder`, {
+              product_positions: productPositions
+            }).catch((response) => {
+              this.handleXHRError(response);
+            });
+          }
+        },
+
+        nextPositionAfter(products) {
+          const maxPosition = products.reduce((max, pp) => (
+            typeof pp.position === 'number' && pp.position > max ? pp.position : max
+          ), -1);
+          return maxPosition + 1;
+        },
+
+        assignProductToFolder(product, folderId) {
+          const siblingProducts = this.productPrices.filter((pp) => (
+            folderId ? pp.product_price_folder_id == folderId : !pp.product_price_folder_id
+          ));
+          const position = this.nextPositionAfter(siblingProducts);
+
+          // Update UI immediately for fast response
+          product.product_price_folder_id = folderId;
+          product.position = position;
+
+          // Mark as handled to prevent onGridDragEnd from processing
+          this.draggedItemHandled = true;
+
+          api.patch(`/product_prices/${product.id}/assign_folder`, {
+            folder_id: folderId,
+            position
+          }).catch((response) => {
+            this.handleXHRError(response);
+          }).finally(() => {
+            this.draggedItemHandled = false;
+          });
+        },
+
+        onDrop(payload) {
+          if (!this.draggedItem || !payload || !payload.item) return;
+
+          const draggedItemType = this.draggedItemType;
+          const draggedItem = this.draggedItem;
+          const targetItemType = payload.itemType;
+          const targetItem = payload.item;
+
+          // Ensure we have a valid event object
+          if (payload.evt && typeof payload.evt.preventDefault === 'function') {
+            payload.evt.preventDefault();
+            payload.evt.stopPropagation();
+          }
+
+          // Only allow dropping products onto folders or back button
+          if (draggedItemType === 'product' && (targetItemType === 'folder' || targetItemType === 'back')) {
+            const folderId = targetItemType === 'folder' ? parseInt(targetItem.id) : null;
+            this.assignProductToFolder(draggedItem, folderId);
+          }
+        },
+
+        onDragStart(payload) {
+          if (payload && payload.item) {
+            this.draggedItem = payload.item;
+            this.draggedItemType = payload.itemType;
+          }
+        },
+
+        onDragEnd() {
+          this.draggedItem = null;
+          this.draggedItemType = null;
+          this.draggedItemHandled = false;
+        },
+
+        updateGridSize() {
+          // Prevent rapid consecutive calls
+          if (this.gridSizeUpdateInProgress) return;
+
+          // Capture the value being sent
+          const gridSizeToSend = this.gridSize;
+          this.gridSizeUpdateInProgress = true;
+
+          api.patch(`/price_lists/${this.priceListId}`, {
+            price_list: { grid_size: gridSizeToSend }
+          }).catch((response) => {
+            this.handleXHRError(response);
+          }).finally(() => {
+            this.gridSizeUpdateInProgress = false;
+            // Schedule a retry if gridSize changed during the request
+            if (this.gridSize !== gridSizeToSend) {
+              this.gridSizeUpdateTimeout = setTimeout(() => {
+                this.updateGridSize();
+              }, 500);
+            }
+          });
+        },
+
+        openFolderModal(folder = null) {
+          this.editingFolder = folder;
+          if (folder) {
+            this.folderForm = { name: folder.name, color: folder.color };
+          } else {
+            this.folderForm = { name: '', color: '#6c757d' };
+          }
+          this.showFolderModal = true;
+        },
+
+        closeFolderModal() {
+          this.showFolderModal = false;
+          this.editingFolder = null;
+          this.folderForm = { name: '', color: '#6c757d' };
+        },
+
+        saveFolder() {
+          if (!this.folderForm.name.trim()) {
+            this.sendFlash('Voer een mapnaam in', '', 'warning');
+            return;
+          }
+
+          const normalizedColor = (this.folderForm.color || '').trim();
+          if (!this.isValidHexColor(normalizedColor)) {
+            this.sendFlash('Voer een geldige hex kleur in (bijv. #6c757d)', '', 'warning');
+            return;
+          }
+          this.folderForm.color = normalizedColor;
+
+          if (this.editingFolder) {
+            api.patch(`/product_price_folders/${this.editingFolder.id}`, {
+              product_price_folder: this.folderForm
+            }).then((response) => {
+              const index = this.folders.findIndex(f => f.id === this.editingFolder.id);
+              if (index !== -1) {
+                this.$set(this.folders, index, response.data);
+              }
+              this.sendFlash('Map bijgewerkt', '', 'success');
+              this.closeFolderModal();
+            }).catch((response) => {
+              this.handleXHRError(response);
+            });
+          } else {
+            api.post(`/price_lists/${this.priceListId}/product_price_folders`, {
+              product_price_folder: this.folderForm
+            }).then((response) => {
+              this.folders.push(response.data);
+              this.sendFlash('Map aangemaakt', '', 'success');
+              this.closeFolderModal();
+            }).catch((response) => {
+              this.handleXHRError(response);
+            });
+          }
+        },
+
+        deleteFolder(folder) {
+          if (!confirm(`Map "${folder.name}" verwijderen? Producten worden terug naar het hoofdscherm verplaatst.`)) {
+            return;
+          }
+
+          api.delete(`/product_price_folders/${folder.id}`).then(() => {
+            this.productPrices.forEach(pp => {
+              if (pp.product_price_folder_id === folder.id) {
+                pp.product_price_folder_id = null;
+              }
+            });
+            const index = this.folders.findIndex(f => f.id === folder.id);
+            if (index !== -1) {
+              this.folders.splice(index, 1);
+            }
+            this.sendFlash('Map verwijderd', '', 'success');
+            this.closeFolderModal();
+          }).catch((response) => {
+            this.handleXHRError(response);
+          });
+        },
       },
 
       computed: {
@@ -295,6 +642,109 @@ document.addEventListener('turbo:load', () => {
 
         isMobile() {
           return this.isIos || /Android|webOS|Opera Mini/i.test(navigator.userAgent);
+        },
+
+        sortedFolders() {
+          return [...this.folders].sort((a, b) => a.position - b.position);
+        },
+
+        productsWithoutFolder() {
+          return this.productPrices
+            .filter(pp => !pp.product_price_folder_id)
+            .sort((a, b) => a.position - b.position);
+        },
+
+        productsInCurrentFolder() {
+          if (!this.currentFolder) return [];
+          return this.productPrices
+            .filter(pp => pp.product_price_folder_id === this.currentFolder.id)
+            .sort((a, b) => a.position - b.position);
+        },
+
+        visibleProducts() {
+          if (this.currentFolder) {
+            return this.productsInCurrentFolder;
+          }
+          return this.productsWithoutFolder;
+        },
+
+        isInFolder() {
+          return this.currentFolder !== null;
+        },
+
+        gridItems() {
+          const items = [];
+          
+          // Add back button if in folder - always first and fixed
+          if (this.currentFolder) {
+            items.push({
+              type: 'back',
+              item: this.currentFolder,
+              id: 'back',
+              position: -1000 // Always first, fixed position
+            });
+          }
+          
+          // Add folders if not in folder
+          if (!this.currentFolder) {
+            this.sortedFolders.forEach(folder => {
+              items.push({
+                type: 'folder',
+                item: folder,
+                id: folder.id,
+                position: folder.position
+              });
+            });
+          }
+          
+          // Add products
+          this.visibleProducts.forEach(productPrice => {
+            items.push({
+              type: 'product',
+              item: productPrice,
+              id: productPrice.id,
+              position: productPrice.position
+            });
+          });
+          
+          // Sort: back button first, then folders by position, then products by position
+          return items.sort((a, b) => {
+            if (a.type === 'back') return -1;
+            if (b.type === 'back') return 1;
+            
+            // Group folders before products
+            if (a.type === 'folder' && b.type === 'product') return -1;
+            if (a.type === 'product' && b.type === 'folder') return 1;
+            
+            // Within same type, sort by position
+            return a.position - b.position;
+          });
+        },
+
+        productGridStyle() {
+          return {
+            gridTemplateColumns: `repeat(${this.gridSize}, 1fr)`,
+            gridTemplateRows: `repeat(${this.gridSize}, auto)`
+          };
+        }
+      },
+
+      watch: {
+        gridSize: {
+          handler: function(newVal, oldVal) {
+            // Only call update if value actually changed
+            if (newVal !== oldVal) {
+              // Clear any pending update
+              if (this.gridSizeUpdateTimeout) {
+                clearTimeout(this.gridSizeUpdateTimeout);
+              }
+              // Debounce the update - always schedule, updateGridSize will handle in-progress
+              this.gridSizeUpdateTimeout = setTimeout(() => {
+                this.updateGridSize();
+              }, 500);
+            }
+          },
+          immediate: false
         }
       },
 
@@ -305,12 +755,16 @@ document.addEventListener('turbo:load', () => {
       },
       destroyed: function() {
         document.removeEventListener('keyup', this.escapeKeyListener);
+        if (this.gridSizeUpdateTimeout) {
+          clearTimeout(this.gridSizeUpdateTimeout);
+        }
       },
 
       components: {
         FlashNotification,
         UserSelection,
-        ActivityOrders
+        ActivityOrders,
+        GridTile
       },
     });
 
diff --git a/app/models/price_list.rb b/app/models/price_list.rb
index 42e050344..548122509 100644
--- a/app/models/price_list.rb
+++ b/app/models/price_list.rb
@@ -1,9 +1,13 @@
 class PriceList < ApplicationRecord
-  has_many :product_price, dependent: :destroy
-  has_many :products, through: :product_price, dependent: :restrict_with_exception
+  has_many :product_prices, dependent: :destroy
+  has_many :products, through: :product_prices, dependent: :restrict_with_exception
   has_many :activities, dependent: :restrict_with_exception
+  has_many :product_price_folders, dependent: :destroy
 
   validates :name, presence: true
+  validates :grid_size, numericality: { only_integer: true, greater_than_or_equal_to: 2, less_than_or_equal_to: 9 }, allow_nil: true
+
+  after_initialize :set_defaults, unless: :persisted?
 
   scope :unarchived, -> { where(archived_at: nil) }
 
@@ -15,4 +19,10 @@ def product_price_for(product)
   def to_s
     name
   end
+
+  private
+
+  def set_defaults
+    self.grid_size ||= 4
+  end
 end
diff --git a/app/models/product_price.rb b/app/models/product_price.rb
index 1afb21990..a52d46a27 100644
--- a/app/models/product_price.rb
+++ b/app/models/product_price.rb
@@ -1,9 +1,29 @@
 class ProductPrice < ApplicationRecord
   belongs_to :product
   belongs_to :price_list
+  belongs_to :product_price_folder, optional: true
 
   validates :price, presence: true, inclusion: { in: 0..100 }
   validates :product_id, uniqueness: { scope: %i[price_list_id deleted_at] }
+  validates :position, presence: true, numericality: { only_integer: true, greater_than_or_equal_to: 0 }
 
   delegate :name, to: :product
+
+  scope :ordered, -> { order(:position) }
+
+  before_validation :set_default_position, on: :create
+
+  scope :without_folder, -> { where(product_price_folder_id: nil) }
+
+  scope :in_folder, ->(folder) { where(product_price_folder: folder) }
+
+  private
+
+  def set_default_position
+    return if position.present? && position >= 0
+
+    scope = price_list&.product_prices&.where(product_price_folder_id: product_price_folder_id)
+    max_position = scope&.maximum(:position) || -1
+    self.position = max_position + 1
+  end
 end
diff --git a/app/models/product_price_folder.rb b/app/models/product_price_folder.rb
new file mode 100644
index 000000000..49fdf8468
--- /dev/null
+++ b/app/models/product_price_folder.rb
@@ -0,0 +1,22 @@
+class ProductPriceFolder < ApplicationRecord
+  belongs_to :price_list
+  has_many :product_prices, dependent: :nullify
+
+  validates :name, presence: true
+  validates :color, presence: true,
+                    format: { with: /\A#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})\z/, message: 'must be a valid hexcode (e.g., #FF5733 or #F57)' }
+  validates :position, presence: true, numericality: { only_integer: true, greater_than_or_equal_to: 0 }
+
+  default_scope { order(:position) }
+
+  before_validation :set_default_position, on: :create
+
+  private
+
+  def set_default_position
+    return if position.present? && position >= 0
+
+    max_position = price_list&.product_price_folders&.maximum(:position) || -1
+    self.position = max_position + 1
+  end
+end
diff --git a/app/policies/price_list_policy.rb b/app/policies/price_list_policy.rb
index cb74229de..54d59cc8c 100644
--- a/app/policies/price_list_policy.rb
+++ b/app/policies/price_list_policy.rb
@@ -38,6 +38,6 @@ def search?
   end
 
   def permitted_attributes
-    %i[name]
+    %i[name grid_size]
   end
 end
diff --git a/app/policies/product_price_folder_policy.rb b/app/policies/product_price_folder_policy.rb
new file mode 100644
index 000000000..dddff8431
--- /dev/null
+++ b/app/policies/product_price_folder_policy.rb
@@ -0,0 +1,35 @@
+class ProductPriceFolderPolicy < ApplicationPolicy
+  def index?
+    user&.treasurer? || user&.renting_manager? || user&.main_bartender?
+  end
+
+  def show?
+    index?
+  end
+
+  def create?
+    user&.treasurer?
+  end
+
+  def update?
+    user&.treasurer?
+  end
+
+  def destroy?
+    user&.treasurer?
+  end
+
+  def reorder?
+    user&.treasurer?
+  end
+
+  def permitted_attributes
+    %i[name color position]
+  end
+
+  class Scope < Scope
+    def resolve
+      scope.all
+    end
+  end
+end
diff --git a/app/policies/product_price_policy.rb b/app/policies/product_price_policy.rb
index c813a1eb0..a0d8bf853 100644
--- a/app/policies/product_price_policy.rb
+++ b/app/policies/product_price_policy.rb
@@ -1,5 +1,23 @@
 class ProductPricePolicy < ApplicationPolicy
+  def update?
+    user&.treasurer?
+  end
+
   def destroy?
     user&.treasurer?
   end
+
+  def assign_folder?
+    update?
+  end
+
+  def reorder?
+    update?
+  end
+
+  class Scope < Scope
+    def resolve
+      scope.all
+    end
+  end
 end
diff --git a/app/views/activities/order_screen.html.erb b/app/views/activities/order_screen.html.erb
index ebd8b2c2f..2e5e47581 100644
--- a/app/views/activities/order_screen.html.erb
+++ b/app/views/activities/order_screen.html.erb
@@ -3,7 +3,7 @@
   <%= javascript_include_tag "order_screen", "data-turbo-track": "reload", defer: true %>
 <% end %>
 <%= content_tag :div, id: 'order-screen', class: 'order-screen',
-                data: {users: @users_json, product_prices: @product_prices_json, activity: @activity_json, sumup_callback: sumup_callback_activity_url, sumup_key: @sumup_key, flashes: flash, site_name: Rails.application.config.x.site_short_name, deposit_button_enabled: Rails.application.config.x.deposit_button_enabled} do
+                data: {users: @users_json, product_prices: @product_prices_json, folders: @folders_json, activity: @activity_json, is_treasurer: @is_treasurer, price_list_id: @price_list_id, price_list_grid_size: @price_list_grid_size, sumup_callback: sumup_callback_activity_url, sumup_key: @sumup_key, flashes: flash, site_name: Rails.application.config.x.site_short_name, deposit_button_enabled: Rails.application.config.x.deposit_button_enabled} do
 
 %>
 
@@ -18,11 +18,11 @@
   <nav class="header">
     <ul class="header-nav">
       <li class="header-nav-item header-nav-home">
-        <span @click="payWithCash ? payWithCash = false : (payWithPin ? payWithPin = false : selectedUser = null)"
+        <span @click="leaveOrderScreen"
               class="user-details-close" v-if="selectedUser || payWithCash || payWithPin">
           <i class="fas fa-chevron-left"></i>
           </span>
-        <span v-else="">
+        <span v-else>
           <%= link_to @activity do %>
             <i class="fas fa-home"></i>
           <% end %>
@@ -37,24 +37,33 @@
         </small>
       </li>
     </ul>
-    <div class="row pull-right g-0" style="flex-direction: row-reverse">
-      <button type="button" class="btn btn-outline-secondary m-3 w-auto" @click="keepUserSelected = !keepUserSelected" >
-        <span v-if="keepUserSelected">
-          <i class="fas fa-square-check fa-lg me-1"></i>
+    <div class="header-actions">
+      <button v-if="isTreasurer && (selectedUser || payWithCash || payWithPin)" type="button" class="btn btn-outline-secondary m-3 me-5 w-auto" @click="toggleEditMode">
+        <i class="fas" :class="editMode ? 'fa-check' : 'fa-pen'"></i>
+        <span class="ms-1">
+          {{ editMode ? 'Klaar' : 'Bewerken' }}
         </span>
-        <span v-if="!keepUserSelected">
-          <i class="far fa-square fa-lg me-1"></i>
-        </span>
-        <span>
-          Persoon onthouden
+      </button>
+      <button v-if="editMode && !currentFolder" type="button" class="btn btn-outline-secondary m-3 w-auto" @click="openFolderModal(null)">
+        <i class="fas fa-folder-plus"></i>
+        <span class="ms-1">
+          Nieuwe map
         </span>
       </button>
+      <button v-if="!editMode" type="button" class="btn btn-outline-secondary m-3 w-auto" @click="keepUserSelected = !keepUserSelected">
+        <i :class="keepUserSelected ? 'fas fa-square-check' : 'far fa-square'" class="fa-lg me-1"></i>
+        <span>Persoon onthouden</span>
+      </button>
+      <div v-if="editMode" class="header-slider m-3">
+        <input type="range" min="2" max="9" step="1" v-model="gridSize" class="form-range" id="gridSizeSlider">
+        <label for="gridSizeSlider" class="ms-2">{{ gridSize }}×{{ gridSize }}</label>
+      </div>
     </div>
 
     <flash-notification>
     </flash-notification>
   </nav>
-  <div class="side-panel">
+  <div class="side-panel" :class="{ 'edit-mode-disabled': editMode }">
     <user-selection :pay-with-cash="payWithCash" :pay-with-pin="payWithPin" :selected-user="selectedUser"
                     :users="users" :deposit-button-enabled="depositButtonEnabled" v-on:selectcash="selectCash" v-on:selectpin="selectPin" v-on:updateuser="setUser($event)">
     </user-selection>
@@ -66,11 +75,11 @@
         <template v-for="(orderRow, index) in orderRows">
           <div class="orders-rows-row row py-2">
             <div class="orders-rows-row-count col-3 px-1 px-md-2 px-lg-3">
-              <i class="far fa-square-plus fa-lg orders-rows-row-count-icon" @click="increaseRowAmount(orderRow)"></i>
+              <i class="far fa-square-plus fa-lg orders-rows-row-count-icon" @click="!editMode && increaseRowAmount(orderRow)"></i>
               <div>
                 <%= '{{orderRow.amount}}' %>
               </div>
-              <i class="far fa-square-minus fa-lg orders-rows-row-count-icon" @click="decreaseRowAmount(orderRow)"></i>
+              <i class="far fa-square-minus fa-lg orders-rows-row-count-icon" @click="!editMode && decreaseRowAmount(orderRow)"></i>
             </div>
             <div class="orders-rows-row-product-name col-6">
               {{orderRow.productPrice.product.name}}
@@ -79,7 +88,7 @@
               <span :title="doubleToCurrency(orderRow.productPrice.price) + ' p.s.'">
                 {{doubleToCurrency(orderRow.productPrice.price * orderRow.amount)}}
               </span>
-              <span @click="dropOrderRow(index)" class="order-rows-row-remove ms-1">
+              <span @click="!editMode && dropOrderRow(index)" class="order-rows-row-remove ms-1">
                 <i class="far fa-circle-xmark fa-lg"></i>
               </span>
             </div>
@@ -110,12 +119,12 @@
         <div class="btn-group btn-group-lg" role="group" v-if="payWithPin && <%= @sumup_enabled.to_s %> && isMobile">
           <button type="button" class="btn btn-success col-9"
              @click="confirmOrder(true)"
-             :class="{ 'disabled': orderConfirmButtonDisabled }">
+             :disabled="orderConfirmButtonDisabled || editMode">
             <span class="text-uppercase">
               Sumup betaling
             </span>
           </button>
-          <button type="button" class="btn btn-dark" :disabled="orderConfirmButtonDisabled"
+          <button type="button" class="btn btn-dark" :disabled="orderConfirmButtonDisabled || editMode"
                   @click="confirmOrder(false)">
             <i class="fas fa-money-bill"></i>
           </button>
@@ -123,7 +132,7 @@
 
         <button @click="maybeConfirmOrder" class="btn btn-lg btn-success"
               :class="{ 'btn-warning' : showOrderWarning && !showCannotOrderWarning, 'btn-danger' : showCannotOrderWarning }"
-              :disabled="orderConfirmButtonDisabled"
+              :disabled="orderConfirmButtonDisabled || editMode"
               v-if="!payWithPin || !<%= @sumup_enabled.to_s %> || !isMobile">
           <span class="text-uppercase">
             Bestelling plaatsen
@@ -163,29 +172,60 @@
     <activity-orders ref="activityOrders" :activity="activity" editable expand_first>
     </activity-orders>
   </div>
-  <div class="product-grid" v-if="selectedUser || payWithCash || payWithPin">
-    <div @click="selectProduct(productPrice)" class="product-grid-product"
-         :class="{ 'product-requires-age' : (selectedUser && selectedUser.minor && productPrice.product.requires_age) }"
-         :style="productPrice.product.color ? { backgroundColor: productPrice.product.color } : {}"
-         v-for="productPrice in productPrices">
-      <span class="product-grid-product-requires-age mb-2 fa-stack" v-if="selectedUser && selectedUser.minor && productPrice.product.requires_age">
-        <i class="fa fa-circle fa-circle-lighter fa-stack-2x">
-        </i>
-        <span class="fa fa-stack-1x fa-inverse fa-plus18">
-        </span>
-      </span>
-      <span class="product-grid-product-name">
-        {{productPrice.product.name}}
-      </span>
-      <span class="product-grid-product-price">
-        {{doubleToCurrency(productPrice.price)}}
-      </span>
-    </div>
-    <em class="no-items" v-if="!productPrices.length">
+  <div class="product-grid" v-if="selectedUser || payWithCash || payWithPin" :style="productGridStyle" ref="gridContainer">
+    <grid-tile
+      v-for="gridItem in gridItems"
+      :key="gridItem.type + '-' + gridItem.id"
+      :item-type="gridItem.type"
+      :item="gridItem.item"
+      :edit-mode="editMode"
+      :selected-user="selectedUser"
+      :dragged-item="draggedItem"
+      :dragged-item-type="draggedItemType"
+      :background-color="gridItem.type === 'back' ? currentFolder.color : null"
+      @click="handleTileClick"
+      @edit="handleTileEdit"
+      @dragstart="onDragStart"
+      @dragend="onDragEnd"
+      @dragover="handleDragOver"
+      @drop="onDrop"
+    />
+  </div>
+
+    <em class="no-items" v-if="!visibleProducts.length && !sortedFolders.length">
       <span>
         Nog geen producten beschikbaar in de prijslijst  <%= @activity.price_list.name %> .
         Klik <%= link_to 'hier', price_lists_path %> om prijzen aan te maken.
       </span>
     </em>
+
+    <div class="folder-modal-backdrop" v-if="showFolderModal" @click="closeFolderModal">
+      <div class="folder-modal" @click.stop>
+        <div class="folder-modal-header">
+          <h5>{{ editingFolder ? 'Map bewerken' : 'Nieuwe map' }}</h5>
+          <button type="button" class="btn-close" @click="closeFolderModal"></button>
+        </div>
+        <div class="folder-modal-body">
+          <div class="mb-3">
+            <label class="form-label">Naam</label>
+            <input type="text" class="form-control" v-model="folderForm.name" placeholder="Mapnaam">
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Kleur (Hex)</label>
+            <div class="d-flex align-items-center gap-2">
+              <input type="text" class="form-control" v-model="folderForm.color" placeholder="#6c757d" pattern="^#[0-9A-Fa-f]{6}$">
+              <span class="border rounded" :style="{ width: '28px', height: '28px', backgroundColor: (folderForm.color && isValidHexColor(folderForm.color.trim())) ? folderForm.color.trim() : 'transparent' }"></span>
+            </div>
+          </div>
+        </div>
+        <div class="folder-modal-footer">
+          <button v-if="editingFolder" type="button" class="btn btn-danger me-auto" @click="deleteFolder(editingFolder)">
+            <i class="fas fa-trash"></i> Verwijderen
+          </button>
+          <button type="button" class="btn btn-secondary" @click="closeFolderModal">Annuleren</button>
+          <button type="button" class="btn btn-primary" @click="saveFolder">Opslaan</button>
+        </div>
+      </div>
+    </div>
   </div>
 <% end %>
\ No newline at end of file
diff --git a/app/views/errors/unprocessable_entity.html.erb b/app/views/errors/unprocessable_content.html.erb
similarity index 100%
rename from app/views/errors/unprocessable_entity.html.erb
rename to app/views/errors/unprocessable_content.html.erb
diff --git a/config/routes.rb b/config/routes.rb
index 4e21b9945..318cbc667 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -17,6 +17,23 @@
       post :archive
       post :unarchive
     end
+    resources :product_price_folders, only: %i[index create] do
+      collection do
+        patch :reorder
+      end
+    end
+    resources :product_prices, only: [] do
+      collection do
+        patch :reorder
+      end
+    end
+  end
+
+  resources :product_price_folders, only: %i[update destroy]
+  resources :product_prices, only: [] do
+    member do
+      patch :assign_folder
+    end
   end
 
   resources :users, only: %i[index show create update] do
@@ -83,6 +100,6 @@
   get '/403', to: 'errors#forbidden'
   get '/404', to: 'errors#not_found'
   get '/406', to: 'errors#unacceptable'
-  get '/422', to: 'errors#unprocessable_entity'
+  get '/422', to: 'errors#unprocessable_content'
   get '/500', to: 'errors#internal_server_error'
 end
diff --git a/db/migrate/20260121000001_create_product_price_folders.rb b/db/migrate/20260121000001_create_product_price_folders.rb
new file mode 100644
index 000000000..b19988a52
--- /dev/null
+++ b/db/migrate/20260121000001_create_product_price_folders.rb
@@ -0,0 +1,16 @@
+class CreateProductPriceFolders < ActiveRecord::Migration[7.2]
+  def change
+    create_table :product_price_folders do |t|
+      t.references :price_list, null: false, foreign_key: true
+      t.string :name, null: false
+      t.integer :position, null: false, default: 0
+      t.string :color, null: false, default: '#6c757d'
+      t.datetime :deleted_at
+
+      t.timestamps
+    end
+
+    add_index :product_price_folders, :deleted_at
+    add_index :product_price_folders, %i[price_list_id position]
+  end
+end
diff --git a/db/migrate/20260121000002_add_folder_and_position_to_product_prices.rb b/db/migrate/20260121000002_add_folder_and_position_to_product_prices.rb
new file mode 100644
index 000000000..7f5062250
--- /dev/null
+++ b/db/migrate/20260121000002_add_folder_and_position_to_product_prices.rb
@@ -0,0 +1,8 @@
+class AddFolderAndPositionToProductPrices < ActiveRecord::Migration[7.2]
+  def change
+    add_reference :product_prices, :product_price_folder, foreign_key: true, null: true
+    add_column :product_prices, :position, :integer, null: false, default: 0
+
+    add_index :product_prices, %i[price_list_id product_price_folder_id position], name: 'index_product_prices_on_folder_and_position'
+  end
+end
diff --git a/db/migrate/20260911224218_add_grid_size_to_price_lists.rb b/db/migrate/20260911224218_add_grid_size_to_price_lists.rb
new file mode 100644
index 000000000..1a7a61402
--- /dev/null
+++ b/db/migrate/20260911224218_add_grid_size_to_price_lists.rb
@@ -0,0 +1,5 @@
+class AddGridSizeToPriceLists < ActiveRecord::Migration[7.2]
+  def change
+    add_column :price_lists, :grid_size, :integer, default: 4
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 8e64bb1a8..4b8894ea8 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: 2025_12_12_000001) do
+ActiveRecord::Schema[7.2].define(version: 2026_09_11_224218) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
@@ -43,6 +43,54 @@
     t.index ["user_id"], name: "index_credit_mutations_on_user_id"
   end
 
+  create_table "debit_collections", force: :cascade do |t|
+    t.string "name", null: false
+    t.date "collection_date", null: false
+    t.bigint "author_id"
+    t.string "status", default: "pending", null: false
+    t.text "sepa_file_content"
+    t.datetime "deleted_at"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["author_id"], name: "index_debit_collections_on_author_id"
+    t.index ["collection_date"], name: "index_debit_collections_on_collection_date"
+    t.index ["deleted_at"], name: "index_debit_collections_on_deleted_at"
+    t.index ["status"], name: "index_debit_collections_on_status"
+  end
+
+  create_table "debit_mandates", force: :cascade do |t|
+    t.bigint "user_id", null: false
+    t.string "iban", null: false
+    t.string "iban_holder", null: false
+    t.string "mandate_reference", null: false
+    t.date "start_date", null: false
+    t.date "end_date"
+    t.datetime "deleted_at"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["deleted_at"], name: "index_debit_mandates_on_deleted_at"
+    t.index ["iban"], name: "index_debit_mandates_on_iban"
+    t.index ["mandate_reference"], name: "index_debit_mandates_on_mandate_reference", unique: true
+    t.index ["user_id"], name: "index_debit_mandates_on_user_id"
+  end
+
+  create_table "debit_transactions", force: :cascade do |t|
+    t.bigint "user_id", null: false
+    t.bigint "collection_id", null: false
+    t.bigint "mandate_id", null: false
+    t.string "description", null: false
+    t.decimal "amount", precision: 8, scale: 2, null: false
+    t.string "status", default: "pending", null: false
+    t.datetime "deleted_at"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["collection_id"], name: "index_debit_transactions_on_collection_id"
+    t.index ["deleted_at"], name: "index_debit_transactions_on_deleted_at"
+    t.index ["mandate_id"], name: "index_debit_transactions_on_mandate_id"
+    t.index ["status"], name: "index_debit_transactions_on_status"
+    t.index ["user_id"], name: "index_debit_transactions_on_user_id"
+  end
+
   create_table "invoice_rows", force: :cascade do |t|
     t.bigint "invoice_id"
     t.string "name", null: false
@@ -115,6 +163,20 @@
     t.datetime "created_at", precision: nil, null: false
     t.datetime "updated_at", precision: nil, null: false
     t.datetime "archived_at"
+    t.integer "grid_size", default: 4
+  end
+
+  create_table "product_price_folders", force: :cascade do |t|
+    t.bigint "price_list_id", null: false
+    t.string "name", null: false
+    t.integer "position", default: 0, null: false
+    t.string "color", default: "#6c757d", null: false
+    t.datetime "deleted_at"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["deleted_at"], name: "index_product_price_folders_on_deleted_at"
+    t.index ["price_list_id", "position"], name: "index_product_price_folders_on_price_list_id_and_position"
+    t.index ["price_list_id"], name: "index_product_price_folders_on_price_list_id"
   end
 
   create_table "product_prices", force: :cascade do |t|
@@ -124,9 +186,13 @@
     t.datetime "deleted_at", precision: nil
     t.datetime "created_at", precision: nil, null: false
     t.datetime "updated_at", precision: nil, null: false
+    t.bigint "product_price_folder_id"
+    t.integer "position", default: 0, null: false
+    t.index ["price_list_id", "product_price_folder_id", "position"], name: "index_product_prices_on_folder_and_position"
     t.index ["price_list_id"], name: "index_product_prices_on_price_list_id"
     t.index ["product_id", "price_list_id", "deleted_at"], name: "index_product_prices_on_product_id_and_price_list_id", unique: true
     t.index ["product_id"], name: "index_product_prices_on_product_id"
+    t.index ["product_price_folder_id"], name: "index_product_prices_on_product_price_folder_id"
   end
 
   create_table "products", force: :cascade do |t|
@@ -201,6 +267,13 @@
   add_foreign_key "activities", "users", column: "created_by_id"
   add_foreign_key "activities", "users", column: "locked_by_id"
   add_foreign_key "credit_mutations", "users", column: "created_by_id"
+  add_foreign_key "debit_collections", "users", column: "author_id"
+  add_foreign_key "debit_mandates", "users"
+  add_foreign_key "debit_transactions", "debit_collections", column: "collection_id"
+  add_foreign_key "debit_transactions", "debit_mandates", column: "mandate_id"
+  add_foreign_key "debit_transactions", "users"
   add_foreign_key "orders", "users", column: "created_by_id"
+  add_foreign_key "product_price_folders", "price_lists"
+  add_foreign_key "product_prices", "product_price_folders"
   add_foreign_key "sofia_accounts", "users"
 end
diff --git a/package.json b/package.json
index d60fffc06..2d6e05f13 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "popper.js": "^1.16.1",
     "puppeteer": "^24.37.5",
     "remove-accents": "^0.5.0",
+    "sortablejs": "^1.15.0",
     "vue": "^2.7.16",
     "vue-loader": "^15.11.1",
     "vue-template-compiler": "^2.7.16",
diff --git a/spec/controllers/product_price_folders_controller/create_spec.rb b/spec/controllers/product_price_folders_controller/create_spec.rb
new file mode 100644
index 000000000..35e4aeb4f
--- /dev/null
+++ b/spec/controllers/product_price_folders_controller/create_spec.rb
@@ -0,0 +1,65 @@
+require 'rails_helper'
+
+describe ProductPriceFoldersController do
+  describe 'POST create' do
+    let(:price_list) { create(:price_list) }
+    let(:folder_params) { { name: 'Beers', color: '#FF5733' } }
+    let(:request) do
+      post :create, params: { price_list_id: price_list.id, product_price_folder: folder_params }
+    end
+
+    before { sign_in user }
+
+    describe 'when without permission' do
+      let(:user) { create(:user) }
+
+      it { expect { request }.not_to change(ProductPriceFolder, :count) }
+
+      it 'returns forbidden' do
+        request
+        expect(response).to have_http_status :forbidden
+      end
+    end
+
+    describe 'when as renting-manager' do
+      let(:user) { create(:user, :renting_manager) }
+
+      it { expect { request }.not_to change(ProductPriceFolder, :count) }
+    end
+
+    describe 'when as main-bartender' do
+      let(:user) { create(:user, :main_bartender) }
+
+      it { expect { request }.not_to change(ProductPriceFolder, :count) }
+    end
+
+    describe 'when as treasurer' do
+      let(:user) { create(:user, :treasurer) }
+
+      it { expect { request }.to change(ProductPriceFolder, :count).by(1) }
+
+      it 'creates the folder on the given price_list' do
+        request
+        expect(ProductPriceFolder.last.price_list).to eq price_list
+      end
+
+      it 'returns the created folder' do
+        request
+        expect(response).to have_http_status :created
+        expect(response.parsed_body['name']).to eq 'Beers'
+      end
+
+      context 'with invalid attributes' do
+        let(:folder_params) { { name: '', color: '#FF5733' } }
+
+        it { expect { request }.not_to change(ProductPriceFolder, :count) }
+
+        it 'returns unprocessable_content with errors' do
+          request
+          expect(response).to have_http_status(:unprocessable_content)
+          expect(response.parsed_body['errors']).to be_present
+        end
+      end
+    end
+  end
+end
diff --git a/spec/controllers/product_price_folders_controller/destroy_spec.rb b/spec/controllers/product_price_folders_controller/destroy_spec.rb
new file mode 100644
index 000000000..256aedd95
--- /dev/null
+++ b/spec/controllers/product_price_folders_controller/destroy_spec.rb
@@ -0,0 +1,58 @@
+require 'rails_helper'
+
+describe ProductPriceFoldersController do
+  describe 'DELETE destroy' do
+    let!(:folder) { create(:product_price_folder) }
+    let(:request) do
+      delete :destroy, params: { id: folder.id }
+    end
+
+    before { sign_in user }
+
+    describe 'when without permission' do
+      let(:user) { create(:user) }
+
+      it { expect { request }.not_to change(ProductPriceFolder, :count) }
+
+      it 'returns forbidden' do
+        request
+        expect(response).to have_http_status :forbidden
+      end
+    end
+
+    describe 'when as renting-manager' do
+      let(:user) { create(:user, :renting_manager) }
+
+      it { expect { request }.not_to change(ProductPriceFolder, :count) }
+    end
+
+    describe 'when as main-bartender' do
+      let(:user) { create(:user, :main_bartender) }
+
+      it { expect { request }.not_to change(ProductPriceFolder, :count) }
+    end
+
+    describe 'when as treasurer' do
+      let(:user) { create(:user, :treasurer) }
+
+      it { expect { request }.to change(ProductPriceFolder, :count).by(-1) }
+
+      it 'returns no_content' do
+        request
+        expect(response).to have_http_status(:no_content)
+      end
+
+      context 'when the folder has product_prices' do
+        let(:folder) { create(:product_price_folder, price_list: create(:price_list, :with_products, products: [])) }
+        let!(:without_folder) { create(:product_price, price_list: folder.price_list, position: 0) }
+        let!(:in_folder) { create(:product_price, price_list: folder.price_list, product_price_folder: folder, position: 0) }
+
+        it 'unassigns the products from the folder and appends them after the existing ones' do
+          request
+          expect(in_folder.reload.product_price_folder_id).to be_nil
+          expect(in_folder.position).to eq(without_folder.reload.position + 1)
+        end
+      end
+    end
+  end
+end
diff --git a/spec/controllers/product_price_folders_controller/index_spec.rb b/spec/controllers/product_price_folders_controller/index_spec.rb
new file mode 100644
index 000000000..49c8eebde
--- /dev/null
+++ b/spec/controllers/product_price_folders_controller/index_spec.rb
@@ -0,0 +1,38 @@
+require 'rails_helper'
+
+describe ProductPriceFoldersController do
+  describe 'GET index' do
+    let(:price_list) { create(:price_list) }
+    let!(:folder) { create(:product_price_folder, price_list:) }
+    let(:request) do
+      get :index, params: { price_list_id: price_list.id }
+    end
+
+    before { sign_in user }
+
+    describe 'when without permission' do
+      let(:user) { create(:user) }
+
+      it { expect(request.status).to eq 403 }
+    end
+
+    describe 'when as treasurer' do
+      let(:user) { create(:user, :treasurer) }
+
+      it { expect(request.status).to eq 200 }
+      it { expect(request.parsed_body.pluck('id')).to eq [folder.id] }
+    end
+
+    describe 'when as renting-manager' do
+      let(:user) { create(:user, :renting_manager) }
+
+      it { expect(request.status).to eq 200 }
+    end
+
+    describe 'when as main-bartender' do
+      let(:user) { create(:user, :main_bartender) }
+
+      it { expect(request.status).to eq 200 }
+    end
+  end
+end
diff --git a/spec/controllers/product_price_folders_controller/reorder_spec.rb b/spec/controllers/product_price_folders_controller/reorder_spec.rb
new file mode 100644
index 000000000..57e5b1a8e
--- /dev/null
+++ b/spec/controllers/product_price_folders_controller/reorder_spec.rb
@@ -0,0 +1,60 @@
+require 'rails_helper'
+
+describe ProductPriceFoldersController do
+  describe 'PATCH reorder' do
+    let(:price_list) { create(:price_list) }
+    let!(:first_folder) { create(:product_price_folder, price_list:, position: 0) }
+    let!(:second_folder) { create(:product_price_folder, price_list:, position: 1) }
+    let(:folder_positions) do
+      [{ id: first_folder.id, position: 1 }, { id: second_folder.id, position: 0 }]
+    end
+    let(:request) do
+      patch :reorder, params: { price_list_id: price_list.id, folder_positions: }
+    end
+
+    before { sign_in user }
+
+    describe 'when without permission' do
+      let(:user) { create(:user) }
+
+      it 'does not change positions' do
+        request
+        expect(response).to have_http_status :forbidden
+        expect(first_folder.reload.position).to eq 0
+        expect(second_folder.reload.position).to eq 1
+      end
+    end
+
+    describe 'when as renting-manager' do
+      let(:user) { create(:user, :renting_manager) }
+
+      it 'returns forbidden' do
+        request
+        expect(response).to have_http_status :forbidden
+      end
+    end
+
+    describe 'when as treasurer' do
+      let(:user) { create(:user, :treasurer) }
+
+      it 'updates the positions' do
+        request
+        expect(response).to have_http_status :ok
+        expect(first_folder.reload.position).to eq 1
+        expect(second_folder.reload.position).to eq 0
+      end
+
+      context 'with invalid position data' do
+        let(:folder_positions) do
+          [{ id: first_folder.id, position: nil }]
+        end
+
+        it 'returns unprocessable_content and rolls back changes' do
+          request
+          expect(response).to have_http_status(:unprocessable_content)
+          expect(first_folder.reload.position).to eq 0
+        end
+      end
+    end
+  end
+end
diff --git a/spec/controllers/product_price_folders_controller/update_spec.rb b/spec/controllers/product_price_folders_controller/update_spec.rb
new file mode 100644
index 000000000..5517ff9b8
--- /dev/null
+++ b/spec/controllers/product_price_folders_controller/update_spec.rb
@@ -0,0 +1,64 @@
+require 'rails_helper'
+
+describe ProductPriceFoldersController do
+  describe 'PATCH update' do
+    let(:folder) { create(:product_price_folder, name: 'Old name') }
+    let(:request) do
+      patch :update, params: { id: folder.id, product_price_folder: { name: 'New name' } }
+    end
+
+    before { sign_in user }
+
+    describe 'when without permission' do
+      let(:user) { create(:user) }
+
+      it 'does not update the folder' do
+        request
+        expect(response).to have_http_status :forbidden
+        expect(folder.reload.name).to eq 'Old name'
+      end
+    end
+
+    describe 'when as renting-manager' do
+      let(:user) { create(:user, :renting_manager) }
+
+      it 'does not update the folder' do
+        request
+        expect(response).to have_http_status :forbidden
+        expect(folder.reload.name).to eq 'Old name'
+      end
+    end
+
+    describe 'when as main-bartender' do
+      let(:user) { create(:user, :main_bartender) }
+
+      it 'does not update the folder' do
+        request
+        expect(response).to have_http_status :forbidden
+        expect(folder.reload.name).to eq 'Old name'
+      end
+    end
+
+    describe 'when as treasurer' do
+      let(:user) { create(:user, :treasurer) }
+
+      it 'updates the folder' do
+        request
+        expect(response).to have_http_status :ok
+        expect(folder.reload.name).to eq 'New name'
+      end
+
+      context 'with invalid attributes' do
+        let(:request) do
+          patch :update, params: { id: folder.id, product_price_folder: { name: '' } }
+        end
+
+        it 'returns unprocessable_content and does not update' do
+          request
+          expect(response).to have_http_status(:unprocessable_content)
+          expect(folder.reload.name).to eq 'Old name'
+        end
+      end
+    end
+  end
+end
diff --git a/spec/controllers/product_prices_controller/assign_folder_spec.rb b/spec/controllers/product_prices_controller/assign_folder_spec.rb
new file mode 100644
index 000000000..16bd13518
--- /dev/null
+++ b/spec/controllers/product_prices_controller/assign_folder_spec.rb
@@ -0,0 +1,92 @@
+require 'rails_helper'
+
+describe ProductPricesController do
+  describe 'PATCH assign_folder' do
+    let(:price_list) { create(:price_list) }
+    let(:folder) { create(:product_price_folder, price_list:) }
+    let(:product_price) { create(:product_price, price_list:, position: 0) }
+    let(:request) do
+      patch :assign_folder, params: { id: product_price.id, folder_id: folder.id, position: 2 }
+    end
+
+    before { sign_in user }
+
+    describe 'when without permission' do
+      let(:user) { create(:user) }
+
+      it 'does not assign the folder' do
+        request
+        expect(response).to have_http_status :forbidden
+        expect(product_price.reload.product_price_folder_id).to be_nil
+      end
+    end
+
+    describe 'when as renting-manager' do
+      let(:user) { create(:user, :renting_manager) }
+
+      it 'returns forbidden' do
+        request
+        expect(response).to have_http_status :forbidden
+      end
+    end
+
+    describe 'when as main-bartender' do
+      let(:user) { create(:user, :main_bartender) }
+
+      it 'returns forbidden' do
+        request
+        expect(response).to have_http_status :forbidden
+      end
+    end
+
+    describe 'when as treasurer' do
+      let(:user) { create(:user, :treasurer) }
+
+      it 'assigns the folder and position' do
+        request
+        expect(response).to have_http_status :ok
+        product_price.reload
+        expect(product_price.product_price_folder_id).to eq folder.id
+        expect(product_price.position).to eq 2
+      end
+
+      context 'when the folder does not exist' do
+        let(:request) do
+          patch :assign_folder, params: { id: product_price.id, folder_id: 0 }
+        end
+
+        it 'returns unprocessable_content with an error' do
+          request
+          expect(response).to have_http_status(:unprocessable_content)
+          expect(response.parsed_body['errors']).to include('Folder not found')
+        end
+      end
+
+      context 'when the folder belongs to a different price_list' do
+        let(:other_folder) { create(:product_price_folder) }
+        let(:request) do
+          patch :assign_folder, params: { id: product_price.id, folder_id: other_folder.id }
+        end
+
+        it 'returns unprocessable_content and does not assign the folder' do
+          request
+          expect(response).to have_http_status(:unprocessable_content)
+          expect(product_price.reload.product_price_folder_id).to be_nil
+        end
+      end
+
+      context 'when unassigning from a folder' do
+        let(:product_price) { create(:product_price, price_list:, product_price_folder: folder, position: 0) }
+        let(:request) do
+          patch :assign_folder, params: { id: product_price.id, folder_id: '' }
+        end
+
+        it 'clears the folder' do
+          request
+          expect(response).to have_http_status :ok
+          expect(product_price.reload.product_price_folder_id).to be_nil
+        end
+      end
+    end
+  end
+end
diff --git a/spec/controllers/product_prices_controller/reorder_spec.rb b/spec/controllers/product_prices_controller/reorder_spec.rb
new file mode 100644
index 000000000..a48f9330c
--- /dev/null
+++ b/spec/controllers/product_prices_controller/reorder_spec.rb
@@ -0,0 +1,75 @@
+require 'rails_helper'
+
+describe ProductPricesController do
+  describe 'PATCH reorder' do
+    let(:price_list) { create(:price_list) }
+    let!(:first_product_price) { create(:product_price, price_list:, position: 0) }
+    let!(:second_product_price) { create(:product_price, price_list:, position: 1) }
+    let(:product_positions) do
+      [{ id: first_product_price.id, position: 1, folder_id: nil }, { id: second_product_price.id, position: 0, folder_id: nil }]
+    end
+    let(:request) do
+      patch :reorder, params: { price_list_id: price_list.id, product_positions: }
+    end
+
+    before { sign_in user }
+
+    describe 'when without permission' do
+      let(:user) { create(:user) }
+
+      it 'does not change positions' do
+        request
+        expect(response).to have_http_status :forbidden
+        expect(first_product_price.reload.position).to eq 0
+        expect(second_product_price.reload.position).to eq 1
+      end
+    end
+
+    describe 'when as renting-manager' do
+      let(:user) { create(:user, :renting_manager) }
+
+      it 'returns forbidden' do
+        request
+        expect(response).to have_http_status :forbidden
+      end
+    end
+
+    describe 'when as treasurer' do
+      let(:user) { create(:user, :treasurer) }
+
+      it 'updates the positions' do
+        request
+        expect(response).to have_http_status :ok
+        expect(first_product_price.reload.position).to eq 1
+        expect(second_product_price.reload.position).to eq 0
+      end
+
+      context 'when assigning a folder from the same price_list' do
+        let(:folder) { create(:product_price_folder, price_list:) }
+        let(:product_positions) do
+          [{ id: first_product_price.id, position: 0, folder_id: folder.id }]
+        end
+
+        it 'assigns the folder' do
+          request
+          expect(response).to have_http_status :ok
+          expect(first_product_price.reload.product_price_folder_id).to eq folder.id
+        end
+      end
+
+      context 'when assigning a folder from a different price_list' do
+        let(:other_folder) { create(:product_price_folder) }
+        let(:product_positions) do
+          [{ id: first_product_price.id, position: 0, folder_id: other_folder.id }]
+        end
+
+        it 'returns unprocessable_content and does not change the product' do
+          request
+          expect(response).to have_http_status(:unprocessable_content)
+          expect(first_product_price.reload.product_price_folder_id).to be_nil
+          expect(first_product_price.position).to eq 0
+        end
+      end
+    end
+  end
+end
diff --git a/spec/factories/payment.rb b/spec/factories/payment.rb
index 40ac172da..ad2e0c489 100644
--- a/spec/factories/payment.rb
+++ b/spec/factories/payment.rb
@@ -1,7 +1,7 @@
 FactoryBot.define do
   factory :payment do
     mollie_id { Faker::Name.initials(number: 4) }
-    amount { rand(20..1000) }
+    amount { rand(21.8..1000) }
     status { 'open' }
     user
 
diff --git a/spec/factories/price_list.rb b/spec/factories/price_list.rb
index da53bcc77..2dc4f7a0b 100644
--- a/spec/factories/price_list.rb
+++ b/spec/factories/price_list.rb
@@ -1,6 +1,7 @@
 FactoryBot.define do
   factory :price_list do
     sequence(:name) { |n| "#{Faker::Book.title} #{n}" }
+    grid_size { 4 }
 
     transient do
       with_all_products { false }
diff --git a/spec/factories/product_price_folder.rb b/spec/factories/product_price_folder.rb
new file mode 100644
index 000000000..475e11c0a
--- /dev/null
+++ b/spec/factories/product_price_folder.rb
@@ -0,0 +1,8 @@
+FactoryBot.define do
+  factory :product_price_folder do
+    price_list
+    sequence(:name) { |n| "Folder #{n}" }
+    sequence(:position) { |n| n }
+    color { '#6c757d' }
+  end
+end
diff --git a/spec/models/price_list_spec.rb b/spec/models/price_list_spec.rb
index 12ee69d56..ccbf69876 100644
--- a/spec/models/price_list_spec.rb
+++ b/spec/models/price_list_spec.rb
@@ -11,6 +11,34 @@
 
       it { expect(price_list).not_to be_valid }
     end
+
+    context 'when with a grid_size below the minimum' do
+      subject(:price_list) { build_stubbed(:price_list, grid_size: 1) }
+
+      it { expect(price_list).not_to be_valid }
+    end
+
+    context 'when with a grid_size above the maximum' do
+      subject(:price_list) { build_stubbed(:price_list, grid_size: 10) }
+
+      it { expect(price_list).not_to be_valid }
+    end
+
+    context 'when without a grid_size' do
+      subject(:price_list) { build_stubbed(:price_list, grid_size: nil) }
+
+      it { expect(price_list).to be_valid }
+    end
+  end
+
+  describe '#set_defaults' do
+    it 'defaults grid_size to 4 when not given' do
+      expect(described_class.new.grid_size).to eq 4
+    end
+
+    it 'does not override an explicitly given grid_size' do
+      expect(described_class.new(grid_size: 6).grid_size).to eq 6
+    end
   end
 
   describe '#product_price_for' do
diff --git a/spec/models/product_price_folder_spec.rb b/spec/models/product_price_folder_spec.rb
new file mode 100644
index 000000000..c3afea024
--- /dev/null
+++ b/spec/models/product_price_folder_spec.rb
@@ -0,0 +1,81 @@
+require 'rails_helper'
+
+RSpec.describe ProductPriceFolder do
+  subject(:product_price_folder) { build_stubbed(:product_price_folder) }
+
+  describe '#valid' do
+    it { expect(product_price_folder).to be_valid }
+
+    context 'when without a name' do
+      subject(:product_price_folder) { build_stubbed(:product_price_folder, name: nil) }
+
+      it { expect(product_price_folder).not_to be_valid }
+    end
+
+    context 'when without a color' do
+      subject(:product_price_folder) { build_stubbed(:product_price_folder, color: nil) }
+
+      it { expect(product_price_folder).not_to be_valid }
+    end
+
+    context 'when with an invalid color' do
+      subject(:product_price_folder) { build_stubbed(:product_price_folder, color: 'not-a-hexcode') }
+
+      it { expect(product_price_folder).not_to be_valid }
+    end
+
+    context 'when with a short hexcode color' do
+      subject(:product_price_folder) { build_stubbed(:product_price_folder, color: '#F57') }
+
+      it { expect(product_price_folder).to be_valid }
+    end
+
+    context 'when without a price_list' do
+      subject(:product_price_folder) { build_stubbed(:product_price_folder, price_list: nil) }
+
+      it { expect(product_price_folder).not_to be_valid }
+    end
+
+    context 'when with a negative position' do
+      subject(:product_price_folder) { build_stubbed(:product_price_folder, position: -1) }
+
+      it { expect(product_price_folder).not_to be_valid }
+    end
+  end
+
+  describe '#set_default_position' do
+    subject(:price_list) { create(:price_list) }
+
+    it 'assigns position 0 to the first folder' do
+      folder = create(:product_price_folder, price_list:, position: nil)
+      expect(folder.position).to eq 0
+    end
+
+    it 'assigns the next position after existing folders' do
+      create(:product_price_folder, price_list:, position: 0)
+      folder = create(:product_price_folder, price_list:, position: nil)
+      expect(folder.position).to eq 1
+    end
+  end
+
+  describe 'default scope' do
+    subject(:price_list) { create(:price_list) }
+
+    it 'orders folders by position' do
+      second = create(:product_price_folder, price_list:, position: 1)
+      first = create(:product_price_folder, price_list:, position: 0)
+      expect(price_list.product_price_folders).to eq [first, second]
+    end
+  end
+
+  describe '#destroy' do
+    it 'nullifies the folder on associated product_prices' do
+      folder = create(:product_price_folder)
+      product_price = create(:product_price, price_list: folder.price_list, product_price_folder: folder)
+
+      folder.destroy
+
+      expect(product_price.reload.product_price_folder_id).to be_nil
+    end
+  end
+end
diff --git a/spec/models/product_price_spec.rb b/spec/models/product_price_spec.rb
index bdf837c26..622ec727b 100644
--- a/spec/models/product_price_spec.rb
+++ b/spec/models/product_price_spec.rb
@@ -29,5 +29,63 @@
 
       it { expect(product_price).not_to be_valid }
     end
+
+    context 'when with a negative position' do
+      subject(:product_price) { build_stubbed(:product_price, position: -1) }
+
+      it { expect(product_price).not_to be_valid }
+    end
+
+    context 'when with a duplicate product for the same price_list' do
+      subject(:product_price) { build(:product_price, product: existing.product, price_list: existing.price_list) }
+
+      let(:existing) { create(:product_price) }
+
+      it { expect(product_price).not_to be_valid }
+    end
+  end
+
+  describe '#set_default_position' do
+    subject(:price_list) { create(:price_list, :with_products, products: []) }
+
+    it 'assigns position 0 to the first product_price without a folder' do
+      product_price = create(:product_price, price_list:, position: nil)
+      expect(product_price.position).to eq 0
+    end
+
+    it 'assigns the next position after existing product_prices without a folder' do
+      create(:product_price, price_list:, position: 0)
+      product_price = create(:product_price, price_list:, position: nil)
+      expect(product_price.position).to eq 1
+    end
+
+    it 'tracks positions per folder separately' do
+      folder = create(:product_price_folder, price_list:)
+      create(:product_price, price_list:, position: 0)
+      product_price = create(:product_price, price_list:, product_price_folder: folder, position: nil)
+      expect(product_price.position).to eq 0
+    end
+  end
+
+  describe '.without_folder' do
+    it 'only returns product_prices without a folder' do
+      folder = create(:product_price_folder)
+      in_folder = create(:product_price, price_list: folder.price_list, product_price_folder: folder)
+      without_folder = create(:product_price, price_list: folder.price_list)
+
+      expect(described_class.without_folder).to include(without_folder)
+      expect(described_class.without_folder).not_to include(in_folder)
+    end
+  end
+
+  describe '.in_folder' do
+    it 'only returns product_prices in the given folder' do
+      folder = create(:product_price_folder)
+      in_folder = create(:product_price, price_list: folder.price_list, product_price_folder: folder)
+      without_folder = create(:product_price, price_list: folder.price_list)
+
+      expect(described_class.in_folder(folder)).to include(in_folder)
+      expect(described_class.in_folder(folder)).not_to include(without_folder)
+    end
   end
 end
diff --git a/spec/models/user_spec.rb b/spec/models/user_spec.rb
index 2714046b1..b624cfe51 100644
--- a/spec/models/user_spec.rb
+++ b/spec/models/user_spec.rb
@@ -313,7 +313,7 @@
     let(:user) { create(:user) }
 
     let(:product_price) { build(:product_price, price: 2.00) }
-    let(:price_list) { build(:price_list, product_price: [product_price]) }
+    let(:price_list) { build(:price_list, product_prices: [product_price]) }
     let(:activity) { build(:activity, price_list:) }
 
     let(:default_order) { { products: [product_price.product], activity:, user: } }
@@ -398,7 +398,7 @@
 
     context 'when with data' do
       let(:product_price) { build(:product_price, price: 2.18) }
-      let(:price_list) { build(:price_list, product_price: [product_price]) }
+      let(:price_list) { build(:price_list, product_prices: [product_price]) }
       let(:activity) { build(:activity, price_list:) }
 
       context 'without orders' do
diff --git a/yarn.lock b/yarn.lock
index dc9fd10d8..c7918da41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6998,6 +6998,7 @@ __metadata:
     puppeteer: "npm:^24.37.5"
     remove-accents: "npm:^0.5.0"
     sass: "npm:^1.97.3"
+    sortablejs: "npm:^1.15.0"
     stylelint: "npm:^17.4.0"
     stylelint-config-recess-order: "npm:^7.6.1"
     stylelint-config-standard-scss: "npm:^17.0.0"
@@ -7013,6 +7014,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"sortablejs@npm:^1.15.0":
+  version: 1.15.6
+  resolution: "sortablejs@npm:1.15.6"
+  checksum: 10c0/a75dcf53e5613b4106d46434e40114830f9c6449b3b439bc1925c1fbf0a0c1f044727a8f3d4ae1759fa7beaa33e7eb0c4a413e6aa88d6026577b59f3658ff727
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"