diff --git a/css/ArrayListField.scss.css b/css/ArrayListField.scss.css
index 894b91c..d239873 100644
--- a/css/ArrayListField.scss.css
+++ b/css/ArrayListField.scss.css
@@ -4,7 +4,18 @@
   padding-bottom: 10px; }
 
 .zauberfisch\\SerializedDataObject\\Form\\ArrayListField > .middleColumn {
-  margin-left: 0; }
+  max-width: 83.33333%; }
+
+.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.CompositeField {
+  margin: 0 !important;
+  padding: 0 !important;
+  display: block !important; }
+  .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.CompositeField > .form__fieldgroup {
+    margin: 0 !important;
+    padding: 0 !important;
+    max-width: none !important;
+    -webkit-flex: none !important;
+    flex: none !important; }
 
 .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.field {
   border: 0;
@@ -18,9 +29,9 @@
   border-radius: 3px;
   border: 1px solid #CDCCD0;
   background: rgba(0, 0, 0, 0.05);
-  margin: 0 0 10px; }
+  margin: 0 0 10px !important; }
   .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record {
-    padding: 20px 10px 10px;
+    padding: 15px 10px 10px !important;
     border-bottom: 1px solid #CDCCD0;
     position: relative; }
     .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record:last-child {
@@ -29,26 +40,31 @@
       background: rgba(255, 0, 0, 0.05); }
     .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls {
       position: absolute;
-      right: 5px;
-      top: 10px; }
-      .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > * {
+      right: 0;
+      top: 0;
+      z-index: 50; }
+      .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup > * {
         display: block;
         float: left;
         margin: 0 5px 0 0; }
-      .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-handle {
+      .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup button {
+        background: transparent;
+        border-radius: none; }
+      .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .orderable-handle {
         height: 22px;
         width: 16px;
         cursor: move;
         background: center center no-repeat url("../images/orderable-handle.png"); }
-      .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-up, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-down, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .delete-record {
+      .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .orderable-up, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .orderable-down, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .delete-record {
         padding: 2px; }
-        .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-up:before, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-down:before, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .delete-record:before {
+        .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .orderable-up:before, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .orderable-down:before, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .delete-record:before {
           margin: 0; }
-        .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-up span, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-down span, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .delete-record span {
+        .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .orderable-up span, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .orderable-down span, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .delete-record span {
           display: none; }
-        .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-up:hover, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-down:hover, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .delete-record:hover {
+        .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .orderable-up:hover, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .orderable-down:hover, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > .form__fieldgroup .delete-record:hover {
           background: transparent;
           opacity: .6; }
-    .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record:first-child .controls .orderable-up, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record:last-child .controls .orderable-down {
+    .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record:first-child .controls > .form__fieldgroup .orderable-up,
+    .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record:last-child .controls > .form__fieldgroup .orderable-down {
       cursor: default;
       opacity: .4 !important; }
diff --git a/javascript/ArrayListField.js b/javascript/ArrayListField.js
index 55ac720..a366fd5 100644
--- a/javascript/ArrayListField.js
+++ b/javascript/ArrayListField.js
@@ -1,7 +1,7 @@
 (function ($) {
 	$('.zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField').entwine({
 		getRecordList: function () {
-			return this.find('.record-list');
+			return this.find('.record-list > .form__fieldgroup');
 		}
 	});
 	$('.zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField *').entwine({
@@ -23,14 +23,14 @@
 		},
 		sortableEnable: function () {
 			// enable sorting functionality
-			this.sortable({
+			this.find('> .form__fieldgroup').sortable({
 				handle: ".orderable-handle",
 				axis: "y"
 			});
 		},
 		sortableDisable: function () {
 			try {
-				this.sortable("destroy");
+				this.find('> .form__fieldgroup').sortable("destroy");
 			} catch (e) {
 			}
 		}
@@ -74,8 +74,8 @@
 			var record = this.closest('.record'),
 				recordList = this.getContainerField().getRecordList(),
 				index = record.index();
-			console.log(index);
-			console.log(recordList.find('.record').length - 1);
+			// console.log(index);
+			// console.log(recordList.find('.record').length - 1);
 			if (
 				(index === 0 && this.hasClass('orderable-up')) ||
 				(index === recordList.find('.record').length - 1 && this.hasClass('orderable-down'))
diff --git a/scss/ArrayListField.scss b/scss/ArrayListField.scss
index 513cb8f..d324938 100644
--- a/scss/ArrayListField.scss
+++ b/scss/ArrayListField.scss
@@ -5,8 +5,34 @@
 		padding-bottom: 10px;
 	}
 	> .middleColumn {
-		margin-left: 0;
+		max-width: 83.33333%;
 	}
+	div.CompositeField {
+		margin: 0 !important;
+		padding: 0 !important;
+		display: block !important;
+		
+		> .form__fieldgroup {
+			margin: 0 !important;
+			padding: 0 !important;
+			max-width: none !important;
+			-webkit-flex: none !important;
+			flex: none !important;
+		}
+	}
+	//div.field-inner {
+	//	display: block !important;
+	//
+	//	> div {
+	//		margin-left: 0 !important;
+	//		display: block !important;
+	//		padding-left: 0 !important;
+	//		padding-right: 0 !important;
+	//		max-width: 83.33333% !important;
+	//		-webkit-flex: none !important;
+	//		flex: none !important;
+	//	}
+	//}
 	div.field {
 		border: 0;
 		-webkit-box-shadow: none;
@@ -19,13 +45,13 @@
 		border-radius: 3px;
 		border: 1px solid #CDCCD0;
 		background: rgba(#000, .05);
-		margin: 0 0 10px;
-
+		margin: 0 0 10px !important;
+		
 		.record {
-			padding: 20px 10px 10px;
+			padding: 15px 10px 10px !important;
 			border-bottom: 1px solid #CDCCD0;
 			position: relative;
-
+			
 			&:last-child {
 				border-bottom: 0;
 			}
@@ -34,37 +60,45 @@
 			}
 			.controls {
 				position: absolute;
-				right: 5px;
-				top: 10px;
-
-				> * {
-					display: block;
-					float: left;
-					margin: 0 5px 0 0;
-				}
-
-				.orderable-handle {
-					height: 22px;
-					width: 16px;
-					cursor: move;
-					background: center center no-repeat url('../images/orderable-handle.png');
-				}
-				.orderable-up, .orderable-down, .delete-record {
-					padding: 2px;
-
-					&:before {
-						margin: 0;
+				right: 0;
+				top: 0;
+				z-index: 50;
+				
+				> .form__fieldgroup {
+					> * {
+						display: block;
+						float: left;
+						margin: 0 5px 0 0;
 					}
-					span {
-						display: none;
-					}
-					&:hover {
+					
+					button {
 						background: transparent;
-						opacity: .6;
+						border-radius: none;
+					}
+					.orderable-handle {
+						height: 22px;
+						width: 16px;
+						cursor: move;
+						background: center center no-repeat url('../images/orderable-handle.png');
+					}
+					.orderable-up, .orderable-down, .delete-record {
+						padding: 2px;
+						
+						&:before {
+							margin: 0;
+						}
+						span {
+							display: none;
+						}
+						&:hover {
+							background: transparent;
+							opacity: .6;
+						}
 					}
 				}
 			}
-			&:first-child .controls .orderable-up, &:last-child .controls .orderable-down {
+			&:first-child .controls > .form__fieldgroup .orderable-up,
+			&:last-child .controls > .form__fieldgroup .orderable-down {
 				cursor: default;
 				opacity: .4 !important;
 			}
diff --git a/src/DBField/AbstractField.php b/src/DBField/AbstractField.php
index 2bdfab3..3006063 100644
--- a/src/DBField/AbstractField.php
+++ b/src/DBField/AbstractField.php
@@ -14,7 +14,7 @@
  */
 abstract class AbstractField extends DBField {
 	protected $isChanged = false;
-
+	
 	/**
 	 * @return AbstractList|AbstractField|null
 	 */
@@ -24,7 +24,7 @@ function getValue() {
 		}
 		return $this->value;
 	}
-
+	
 	/**
 	 * @param AbstractList|AbstractDataObject|AbstractField|null|string $value
 	 * @param null $record
@@ -40,11 +40,11 @@ public function setValue($value, $record = null, $markAsChanged = true) {
 		}
 		parent::setValue($value, $record);
 	}
-
+	
 	public function isChanged() {
 		return $this->isChanged;
 	}
-
+	
 	public function prepValueForDB($value) {
 		if (is_a($value, __CLASS__)) {
 			$value = $value->getValue();
@@ -54,9 +54,8 @@ public function prepValueForDB($value) {
 		}
 		return parent::prepValueForDB($value);
 	}
-
+	
 	public function requireField() {
-		// keep using deprecated DB::requireField() for 3.1 compatibility
 		DB::require_field($this->tableName, $this->name, [
 			'type' => 'text',
 			'parts' => [
@@ -67,7 +66,7 @@ public function requireField() {
 			],
 		]);
 	}
-
+	
 	public function __toString() {
 		return $this->prepValueForDB($this->getValue());
 	}
diff --git a/src/Form/ArrayListField.php b/src/Form/ArrayListField.php
index 99c32ca..6994aba 100644
--- a/src/Form/ArrayListField.php
+++ b/src/Form/ArrayListField.php
@@ -22,6 +22,7 @@ class ArrayListField extends FormField {
 	protected $recordFieldsUpdateCallback;
 	protected $recordClassName;
 	protected $orderable = false;
+	protected $schemaDataType = FormField::SCHEMA_DATA_TYPE_CUSTOM;
 	
 	public function __construct($name, $title, $recordClassName) {
 		$this->recordClassName = $recordClassName;
@@ -128,7 +129,7 @@ public function Field($properties = []) {
 				->setUseButtonTag(true)
 				->addExtraClass('font-icon-plus')
 				->addExtraClass('add-record'),
-		]))->FieldHolder()->forTemplate();
+		]))->addExtraClass('field-inner')->FieldHolder()->forTemplate();
 	}
 	
 	/**
@@ -293,7 +294,7 @@ public function handleSubField($fullFieldName) {
 	 * @param DataObjectInterface $record
 	 */
 	public function saveInto(DataObjectInterface $record) {
-		$record->{$this->name} = $this->Value();
+		$record->{$this->name} = $this->Value()->__toString();
 	}
 	
 	private static $allowed_actions = [
diff --git a/templates/SerializedDataObject-Form-ArrayListField.ss b/templates/zauberfisch/SerializedDataObject/Form/ArrayListField.ss
similarity index 100%
rename from templates/SerializedDataObject-Form-ArrayListField.ss
rename to templates/zauberfisch/SerializedDataObject/Form/ArrayListField.ss
diff --git a/templates/SerializedDataObject-Form-ArrayListField_holder.ss b/templates/zauberfisch/SerializedDataObject/Form/ArrayListField_holder.ss
similarity index 100%
rename from templates/SerializedDataObject-Form-ArrayListField_holder.ss
rename to templates/zauberfisch/SerializedDataObject/Form/ArrayListField_holder.ss