diff --git a/components/list/demo/list-drag-and-drop-position.js b/components/list/demo/list-drag-and-drop-position.js
index 6b24852ac5e..d0c94c071b8 100644
--- a/components/list/demo/list-drag-and-drop-position.js
+++ b/components/list/demo/list-drag-and-drop-position.js
@@ -1,7 +1,7 @@
 import '../list-item-content.js';
 import '../list-item.js';
 import '../list.js';
-import { html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -14,10 +14,21 @@ class ListDemoDragAndDropPosition extends LitElement {
 			// below are for demonstration only
 			grid: { type: Boolean },
 			hrefs: { type: Boolean },
-			selectable: { type: Boolean }
+			selectable: { type: Boolean },
+			tiles: { type: Boolean },
+			tileHeader: { type: Boolean, attribute: 'tile-header' },
+			actions: { type: Boolean, attribute: 'actions' }
 		};
 	}
 
+	static styles = css`
+		.actions-containter {
+			align-items: center;
+			display: flex;
+			height: 100%;
+		}
+	`;
+
 	constructor() {
 		super();
 		this.list = [
@@ -73,11 +84,13 @@ class ListDemoDragAndDropPosition extends LitElement {
 				?grid="${this.grid}"
 				@d2l-list-item-position-change="${this._moveItems}"
 				?add-button="${this.addButton}"
-				add-button-text="${ifDefined(addButtonText)}">
+				add-button-text="${ifDefined(addButtonText)}"
+				layout="${this.tiles ? 'tiles' : 'list'}">
 				${repeat(this.list, (item) => item.key, (item) => html`
 					<d2l-list-item
 						key="${ifDefined(item.key)}"
 						draggable
+						?tile-header="${this.tileHeader}"
 						?selectable="${this.selectable}"
 						drag-handle-text="${item.name}"
 						href="${ifDefined(this.hrefs ? item.href : undefined)}"
@@ -87,6 +100,9 @@ class ListDemoDragAndDropPosition extends LitElement {
 							<div>${item.name}</div>
 							<div slot="secondary">${item.secondary}</div>
 						</d2l-list-item-content>
+						${ this.actions ? html`
+							<div class="actions-containter" slot="actions"><d2l-button-icon text="More" icon="tier1:gear"></d2l-button-icon></div>
+						` : nothing}
 					</d2l-list-item>
 				`)}
 			</d2l-list>
diff --git a/components/list/demo/list-drag-and-drop.html b/components/list/demo/list-drag-and-drop.html
index 4e31e20f538..c40240d10fe 100644
--- a/components/list/demo/list-drag-and-drop.html
+++ b/components/list/demo/list-drag-and-drop.html
@@ -70,6 +70,48 @@ <h2>Always Show Handle</h2>
 			</template>
 		</d2l-demo-snippet>
 
+		<h1>Tile Drag and Drop</h1>
+
+		<h2>Position Change Event</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-drag-and-drop-position tiles hrefs tile-header></d2l-demo-list-drag-and-drop-position>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>With Selection</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-drag-and-drop-position tiles hrefs tile-header selectable></d2l-demo-list-drag-and-drop-position>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Without title</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-drag-and-drop-position tiles hrefs selectable></d2l-demo-list-drag-and-drop-position>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Without hrefs</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-drag-and-drop-position tiles tile-header></d2l-demo-list-drag-and-drop-position>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>With Actions</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-drag-and-drop-position tiles tile-header actions></d2l-demo-list-drag-and-drop-position>
+			</template>
+		</d2l-demo-snippet>
+
 	</d2l-demo-page>
 
 	<script>
diff --git a/components/list/list-item-drag-drop-mixin.js b/components/list/list-item-drag-drop-mixin.js
index a7084a2095d..046274c5e08 100644
--- a/components/list/list-item-drag-drop-mixin.js
+++ b/components/list/list-item-drag-drop-mixin.js
@@ -311,12 +311,33 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				width: 100%;
 				z-index: 1;
 			}
+
 			.d2l-list-item-drag-bottom-marker {
 				bottom: -6px;
 			}
 			.d2l-list-item-drag-top-marker {
 				top: -6px;
 			}
+
+			:host([layout="tile"]) .d2l-list-item-drag-bottom-marker,
+			:host([layout="tile"]) .d2l-list-item-drag-top-marker {
+				height: 100%;
+				pointer-events: none;
+				position: absolute;
+				width: auto;
+				z-index: 1;
+			}
+
+			:host([layout="tile"]) .d2l-list-item-drag-bottom-marker {
+				bottom: 0;
+				right: calc(-0.9rem + 3px);
+			}
+			:host([layout="tile"]) .d2l-list-item-drag-top-marker {
+				left: calc(-0.9rem + 3px);
+				top: 0;
+			}
+
+
 			.d2l-list-item-drag-area {
 				cursor: move;
 				height: 100%;
@@ -326,6 +347,11 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				grid-template-columns: 100%;
 				grid-template-rows: 1rem 1fr 1fr 1rem;
 			}
+			:host([layout="tile"]) .d2l-list-item-drag-drop-grid {
+				display: grid;
+				grid-template-columns: 1rem 1fr 1fr 1rem;
+				grid-template-rows: 100%;
+			}
 			:host([_drop-location="7"]) {
 				z-index: 1; /* drop target border must render on top of next adjacent border */
 			}
@@ -344,6 +370,10 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				d2l-list-item-drag-handle {
 					opacity: 0;
 				}
+				:host([layout="tile"][draggable]) d2l-list-item-drag-handle {
+					opacity: 1;
+				}
+
 				:host([selected]) d2l-list-item-drag-handle,
 				:host([current]) d2l-list-item-drag-handle,
 				:host([_drag-handle-show-always]) d2l-list-item-drag-handle,
diff --git a/components/list/list-item-generic-layout.js b/components/list/list-item-generic-layout.js
index 6d13e781c76..af11f89a034 100644
--- a/components/list/list-item-generic-layout.js
+++ b/components/list/list-item-generic-layout.js
@@ -65,8 +65,7 @@ class ListItemGenericLayout extends LitElement {
 			/**
 			 * @ignore
 			 */
-			layout: { type: String, reflect: true }
-
+			layout: { type: String, reflect: true },
 		};
 	}
 
@@ -216,7 +215,21 @@ class ListItemGenericLayout extends LitElement {
 
 			:host([layout="tile"]) {
 				grid-template-columns:
-					[start control-start] minmax(0, min-content)
+					[start outside-control-start] minmax(0, 30px)
+					[outside-control-end control-start] minmax(0, min-content)
+					[control-end actions-start] minmax(0, auto)
+					[actions-end end];
+				grid-template-rows:
+					[start header-start] minmax(0, min-content)
+					[header-end content-start] auto
+					[content-end end];
+				height: 100%;
+			}
+
+			:host([layout="tile"]:not([is-draggable])) {
+				grid-template-columns:
+					[start outside-control-start] 0
+					[outside-control-end control-start] minmax(0, min-content)
 					[control-end actions-start] minmax(0, auto)
 					[actions-end end];
 				grid-template-rows:
@@ -258,14 +271,22 @@ class ListItemGenericLayout extends LitElement {
 				grid-row: content-start / content-end;
 			}
 
+			:host([layout="tile"]) ::slotted([slot="outside-control"]) {
+				grid-column: outside-control-start / outside-control-end;
+				grid-row: start / start;
+				width: min-content;
+			}
+
+			:host([layout="tile"]) ::slotted([slot="outside-control-action"]) {
+				grid-column: start / end;
+				grid-row: start / start;
+			}
+
 			:host(:not([layout="tile"])) slot[name="header"],
 			:host([layout="tile"]) slot[name="add-top"],
 			:host([layout="tile"]) slot[name="control-container"],
 			:host([layout="tile"]) slot[name="before-content"],
-			:host([layout="tile"]) slot[name="outside-control"],
-			:host([layout="tile"]) slot[name="outside-control-action"],
 			:host([layout="tile"]) slot[name="expand-collapse"],
-			:host([layout="tile"]) slot[name="drop-target"],
 			:host([layout="tile"]) slot[name="nested"],
 			:host([layout="tile"]) slot[name="add"] {
 				display: none;
diff --git a/components/list/list-item-link-mixin.js b/components/list/list-item-link-mixin.js
index fdd7f837d9a..d3453dcec7e 100644
--- a/components/list/list-item-link-mixin.js
+++ b/components/list/list-item-link-mixin.js
@@ -35,6 +35,10 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 			:host([action-href]:not([action-href=""])) [slot="outside-control-action"] {
 				grid-column-end: control-end;
 			}
+
+			:host([action-href]:not([action-href=""])[layout="tile"]) [slot="outside-control-action"] {
+				grid-column-end: end;
+			}
 		` ];
 
 		super.styles && styles.unshift(super.styles);
diff --git a/components/list/list-item-mixin.js b/components/list/list-item-mixin.js
index 14910cd000f..2c67d04abc2 100644
--- a/components/list/list-item-mixin.js
+++ b/components/list/list-item-mixin.js
@@ -474,6 +474,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				transform: translateY(-10px);
 				transition: opacity 200ms ease-out, transform 0ms ease-out 300ms;
 			}
+
 			:host([layout="tile"][_selection-when-interacted]) [slot="control"]:hover,
 			:host([layout="tile"][_selection-when-interacted][_focusing]) [slot="control"],
 			:host([layout="tile"][_selection-when-interacted][_force-show-selection]) [slot="control"],
@@ -484,6 +485,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				transition: opacity 200ms ease-out, transform 200ms ease-out;
 			}
 
+			:host([layout="tile"][draggable][tile-header]) [slot="control"] {
+				margin: 0.25rem 0;
+			}
+
 			@media (prefers-reduced-motion: reduce) {
 				:host([layout="tile"][_selection-when-interacted]) [slot="control"] {
 					transform: none;
@@ -587,6 +592,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host([layout="tile"]) d2l-selection-input {
 				margin: 0;
 			}
+
+			:host([layout="tile"][draggable]) d2l-selection-input {
+				margin: auto;
+			}
 			:host([layout="tile"]:not([tile-header])) d2l-selection-input {
 				--d2l-input-checkbox-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
 				--d2l-input-radio-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
@@ -724,6 +733,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			this._hasListItemContent = !!this.shadowRoot.querySelector('slot:not([name])').assignedElements({ flatten: true })
 				.find(elem => elem.tagName === 'D2L-LIST-ITEM-CONTENT');
 		}
+		if (this.draggable && this.layout === 'tile' && this.tileHeader === false) {
+			this.tileHeader = true;
+		}
 	}
 
 	focus() {
@@ -975,6 +987,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				data-separators="${ifDefined(this._separators)}"
 				indentation="${ifDefined(this.indentation)}"
 				?grid-active="${this.role === 'row'}"
+				?selectable="${this.selectable}"
+				?is-draggable="${this.draggable}"
 				layout="${this.layout}"
 				?no-primary-action="${this.noPrimaryAction}">
 				${this._showAddButton && this.first ? html`
@@ -1038,10 +1052,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			</d2l-list-item-generic-layout>
 		`;
 
+		const isDraggableTile = this.draggable && this.layout === 'tile';
+
 		return html`
-			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
+			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker ?verticle="${isDraggableTile}"></d2l-list-item-placement-marker>`)}
 			${this.draggable ? html`<div class="d2l-list-item-drag-image">${innerView}</div>` : innerView}
-			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
+			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker ?verticle="${isDraggableTile}"></d2l-list-item-placement-marker>`)}
 			${this._displayKeyboardTooltip && tooltipForId ? html`<d2l-tooltip align="start" announced for="${tooltipForId}" for-type="descriptor">${this.localizeHTML('components.list.keyboard')}</d2l-tooltip>` : ''}
 			${this.draggable ? this._renderDragMultipleImage() : nothing}
 		`;
diff --git a/components/list/list-item-placement-marker.js b/components/list/list-item-placement-marker.js
index eef47d7ec83..91a55261ec0 100644
--- a/components/list/list-item-placement-marker.js
+++ b/components/list/list-item-placement-marker.js
@@ -3,16 +3,30 @@ import { css, html, LitElement } from 'lit';
 
 class ListItemPlacementMarker extends LitElement {
 
+	static properties = {
+		verticle: { type: Boolean, reflect: true }
+	};
+
 	static get styles() {
 		return css`
 			:host {
 				display: block;
 			}
 
+			:host([verticle]) {
+				height: 100%;
+			}
+
 			:host([hidden]) {
 				display: none;
 			}
 
+			:host([verticle]) .d2l-list-drag-marker-line {
+				height: 100%;
+				margin: -1px 0;
+				width: 12px;
+			}
+
 			.d2l-list-drag-marker-line {
 				height: 12px;
 				margin-left: -1px;
@@ -22,6 +36,12 @@ class ListItemPlacementMarker extends LitElement {
 				width: 100%;
 			}
 
+			:host([verticle]) .d2l-list-drag-marker-linecap {
+				height: 4px;
+				margin-inline: 0 -2px;
+				width: 12px;
+			}
+
 			.d2l-list-drag-marker-linecap {
 				fill: var(--d2l-color-celestine);
 				height: 12px;
@@ -30,6 +50,11 @@ class ListItemPlacementMarker extends LitElement {
 				width: 4px;
 			}
 
+			:host([verticle]) .d2l-list-drag-marker-circle {
+				margin-inline: 0 0;
+			}
+
+
 			.d2l-list-drag-marker-circle {
 				fill: none;
 				height: 12px;
@@ -43,10 +68,37 @@ class ListItemPlacementMarker extends LitElement {
 				display: flex;
 				flex-wrap: nowrap;
 			}
+
+			:host([verticle]) .d2l-list-drag-marker {
+				flex-direction: column;
+				height: 100%;
+			}
 		`;
 	}
 
+	constructor() {
+		super();
+		this.verticle = false;
+	}
+
 	render() {
+
+		if (this.verticle) {
+			return html`
+			<div class="d2l-list-drag-marker">
+				<svg class="d2l-list-drag-marker-circle">
+					<circle cx="50%" cy="50%" r="3.8px"/>
+				</svg>
+				<svg class="d2l-list-drag-marker-line">
+					<line x1="50%" y1="0" x2="50%" y2="100%" />
+				</svg>
+				<svg class="d2l-list-drag-marker-linecap">
+					<circle cx="50%" cy="50%" r="1.5px"/>
+				</svg>
+			</div>
+		`;
+		}
+
 		return html`
 			<div class="d2l-list-drag-marker">
 				<svg class="d2l-list-drag-marker-circle">