diff --git a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppClients.cs b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppClients.cs
index b96e3a80a..fbd7da0f4 100644
--- a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppClients.cs
+++ b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppClients.cs
@@ -13,7 +13,7 @@ using Squidex.Infrastructure.Collections;
 
 namespace Squidex.Domain.Apps.Core.Apps
 {
-    public sealed class AppClients : ArrayDictionary<string, AppClient>
+    public sealed class AppClients : ImmutableDictionary<string, AppClient>
     {
         public static readonly AppClients Empty = new AppClients();
 
@@ -21,8 +21,8 @@ namespace Squidex.Domain.Apps.Core.Apps
         {
         }
 
-        public AppClients(KeyValuePair<string, AppClient>[] items)
-            : base(items)
+        public AppClients(Dictionary<string, AppClient> inner)
+            : base(inner)
         {
         }
 
diff --git a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppContributors.cs b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppContributors.cs
index d072bf94d..9fbde2df8 100644
--- a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppContributors.cs
+++ b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppContributors.cs
@@ -12,7 +12,7 @@ using Squidex.Infrastructure.Collections;
 
 namespace Squidex.Domain.Apps.Core.Apps
 {
-    public sealed class AppContributors : ArrayDictionary<string, string>
+    public sealed class AppContributors : ImmutableDictionary<string, string>
     {
         public static readonly AppContributors Empty = new AppContributors();
 
@@ -20,8 +20,8 @@ namespace Squidex.Domain.Apps.Core.Apps
         {
         }
 
-        public AppContributors(KeyValuePair<string, string>[] items)
-            : base(items)
+        public AppContributors(Dictionary<string, string> inner)
+            : base(inner)
         {
         }
 
diff --git a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppPatterns.cs b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppPatterns.cs
index 8db73c260..5e3bb59cf 100644
--- a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppPatterns.cs
+++ b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/AppPatterns.cs
@@ -13,7 +13,7 @@ using Squidex.Infrastructure.Collections;
 
 namespace Squidex.Domain.Apps.Core.Apps
 {
-    public sealed class AppPatterns : ArrayDictionary<Guid, AppPattern>
+    public sealed class AppPatterns : ImmutableDictionary<Guid, AppPattern>
     {
         public static readonly AppPatterns Empty = new AppPatterns();
 
@@ -21,8 +21,8 @@ namespace Squidex.Domain.Apps.Core.Apps
         {
         }
 
-        public AppPatterns(KeyValuePair<Guid, AppPattern>[] items)
-            : base(items)
+        public AppPatterns(Dictionary<Guid, AppPattern> inner)
+            : base(inner)
         {
         }
 
diff --git a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppClientsConverter.cs b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppClientsConverter.cs
index 322d66db1..a03bba8d5 100644
--- a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppClientsConverter.cs
+++ b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppClientsConverter.cs
@@ -29,14 +29,9 @@ namespace Squidex.Domain.Apps.Core.Apps.Json
 
         protected override AppClients ReadValue(JsonReader reader, Type objectType, JsonSerializer serializer)
         {
-            var json = serializer.Deserialize<Dictionary<string, JsonAppClient>>(reader);
+            var json = serializer.Deserialize<Dictionary<string, JsonAppClient>>(reader)!;
 
-            return new AppClients(json.Select(Convert).ToArray());
-        }
-
-        private static KeyValuePair<string, AppClient> Convert(KeyValuePair<string, JsonAppClient> kvp)
-        {
-            return new KeyValuePair<string, AppClient>(kvp.Key, kvp.Value.ToClient());
+            return new AppClients(json.ToDictionary(x => x.Key, x => x.Value.ToClient()));
         }
     }
 }
diff --git a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppContributorsConverter.cs b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppContributorsConverter.cs
index 25131de9a..70225b4ac 100644
--- a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppContributorsConverter.cs
+++ b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppContributorsConverter.cs
@@ -7,7 +7,6 @@
 
 using System;
 using System.Collections.Generic;
-using System.Linq;
 using Newtonsoft.Json;
 using Squidex.Infrastructure.Json.Newtonsoft;
 
@@ -29,9 +28,9 @@ namespace Squidex.Domain.Apps.Core.Apps.Json
 
         protected override AppContributors ReadValue(JsonReader reader, Type objectType, JsonSerializer serializer)
         {
-            var json = serializer.Deserialize<Dictionary<string, string>>(reader);
+            var json = serializer.Deserialize<Dictionary<string, string>>(reader)!;
 
-            return new AppContributors(json.ToArray());
+            return new AppContributors(json!);
         }
     }
 }
diff --git a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppPatternsConverter.cs b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppPatternsConverter.cs
index 7fae4db0b..adcafa6f4 100644
--- a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppPatternsConverter.cs
+++ b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/AppPatternsConverter.cs
@@ -29,14 +29,9 @@ namespace Squidex.Domain.Apps.Core.Apps.Json
 
         protected override AppPatterns ReadValue(JsonReader reader, Type objectType, JsonSerializer serializer)
         {
-            var json = serializer.Deserialize<Dictionary<Guid, JsonAppPattern>>(reader);
+            var json = serializer.Deserialize<Dictionary<Guid, JsonAppPattern>>(reader)!;
 
-            return new AppPatterns(json.Select(Convert).ToArray());
-        }
-
-        private static KeyValuePair<Guid, AppPattern> Convert(KeyValuePair<Guid, JsonAppPattern> kvp)
-        {
-            return new KeyValuePair<Guid, AppPattern>(kvp.Key, kvp.Value.ToPattern());
+            return new AppPatterns(json.ToDictionary(x => x.Key, x => x.Value.ToPattern()));
         }
     }
 }
diff --git a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/RolesConverter.cs b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/RolesConverter.cs
index 521469240..c8873a8e1 100644
--- a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/RolesConverter.cs
+++ b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Json/RolesConverter.cs
@@ -37,12 +37,7 @@ namespace Squidex.Domain.Apps.Core.Apps.Json
                 return Roles.Empty;
             }
 
-            return new Roles(json.Select(Convert));
-        }
-
-        private static KeyValuePair<string, Role> Convert(KeyValuePair<string, string[]> kvp)
-        {
-            return new KeyValuePair<string, Role>(kvp.Key, new Role(kvp.Key, new PermissionSet(kvp.Value)));
+            return new Roles(json.ToDictionary(x => x.Key, x => new Role(x.Key, new PermissionSet(x.Value))));
         }
     }
 }
diff --git a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Roles.cs b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Roles.cs
index 493aa47ce..92b141cf1 100644
--- a/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Roles.cs
+++ b/backend/src/Squidex.Domain.Apps.Core.Model/Apps/Roles.cs
@@ -19,7 +19,7 @@ namespace Squidex.Domain.Apps.Core.Apps
 {
     public sealed class Roles
     {
-        private readonly ArrayDictionary<string, Role> inner;
+        private readonly ImmutableDictionary<string, Role> inner;
 
         public static readonly IReadOnlyDictionary<string, Role> Defaults = new Dictionary<string, Role>
         {
@@ -48,7 +48,7 @@ namespace Squidex.Domain.Apps.Core.Apps
                     Clean(Permissions.AppWorkflows)))
         };
 
-        public static readonly Roles Empty = new Roles(new ArrayDictionary<string, Role>());
+        public static readonly Roles Empty = new Roles(new ImmutableDictionary<string, Role>());
 
         public int CustomCount
         {
@@ -70,14 +70,14 @@ namespace Squidex.Domain.Apps.Core.Apps
             get { return inner.Values.Union(Defaults.Values); }
         }
 
-        private Roles(ArrayDictionary<string, Role> roles)
+        private Roles(ImmutableDictionary<string, Role> roles)
         {
             inner = roles;
         }
 
-        public Roles(IEnumerable<KeyValuePair<string, Role>> items)
+        public Roles(Dictionary<string, Role> roles)
         {
-            inner = new ArrayDictionary<string, Role>(Cleaned(items));
+            inner = new ImmutableDictionary<string, Role>(Cleaned(roles));
         }
 
         [Pure]
@@ -172,12 +172,12 @@ namespace Squidex.Domain.Apps.Core.Apps
             return permission.Substring(1);
         }
 
-        private static KeyValuePair<string, Role>[] Cleaned(IEnumerable<KeyValuePair<string, Role>> items)
+        private static Dictionary<string, Role> Cleaned(Dictionary<string, Role> inner)
         {
-            return items.Where(x => !Defaults.ContainsKey(x.Key)).ToArray();
+            return inner.Where(x => !Defaults.ContainsKey(x.Key)).ToDictionary(x => x.Key, x => x.Value);
         }
 
-        private Roles Create(ArrayDictionary<string, Role> newRoles)
+        private Roles Create(ImmutableDictionary<string, Role> newRoles)
         {
             return ReferenceEquals(inner, newRoles) ? this : new Roles(newRoles);
         }
diff --git a/backend/src/Squidex.Domain.Apps.Core.Model/Contents/Json/WorkflowConverter.cs b/backend/src/Squidex.Domain.Apps.Core.Model/Contents/Json/WorkflowConverter.cs
index d6cf4a9f8..a5c8d14b4 100644
--- a/backend/src/Squidex.Domain.Apps.Core.Model/Contents/Json/WorkflowConverter.cs
+++ b/backend/src/Squidex.Domain.Apps.Core.Model/Contents/Json/WorkflowConverter.cs
@@ -7,7 +7,6 @@
 
 using System;
 using System.Collections.Generic;
-using System.Linq;
 using Newtonsoft.Json;
 using Squidex.Infrastructure.Json.Newtonsoft;
 
@@ -31,7 +30,7 @@ namespace Squidex.Domain.Apps.Core.Contents.Json
         {
             var json = serializer.Deserialize<Dictionary<Guid, Workflow>>(reader);
 
-            return new Workflows(json.ToArray());
+            return new Workflows(json!);
         }
     }
 }
diff --git a/backend/src/Squidex.Domain.Apps.Core.Model/Contents/Workflows.cs b/backend/src/Squidex.Domain.Apps.Core.Model/Contents/Workflows.cs
index e6094cada..a285b2ac5 100644
--- a/backend/src/Squidex.Domain.Apps.Core.Model/Contents/Workflows.cs
+++ b/backend/src/Squidex.Domain.Apps.Core.Model/Contents/Workflows.cs
@@ -14,7 +14,7 @@ using Squidex.Infrastructure.Collections;
 
 namespace Squidex.Domain.Apps.Core.Contents
 {
-    public sealed class Workflows : ArrayDictionary<Guid, Workflow>
+    public sealed class Workflows : ImmutableDictionary<Guid, Workflow>
     {
         public static readonly Workflows Empty = new Workflows();
 
@@ -22,8 +22,8 @@ namespace Squidex.Domain.Apps.Core.Contents
         {
         }
 
-        public Workflows(KeyValuePair<Guid, Workflow>[] items)
-            : base(items)
+        public Workflows(Dictionary<Guid, Workflow> inner)
+            : base(inner)
         {
         }
 
diff --git a/backend/src/Squidex.Domain.Apps.Entities/Apps/AppCommandMiddleware.cs b/backend/src/Squidex.Domain.Apps.Entities/Apps/AppCommandMiddleware.cs
index b9676d94c..7aa3ef993 100644
--- a/backend/src/Squidex.Domain.Apps.Entities/Apps/AppCommandMiddleware.cs
+++ b/backend/src/Squidex.Domain.Apps.Entities/Apps/AppCommandMiddleware.cs
@@ -58,14 +58,20 @@ namespace Squidex.Domain.Apps.Entities.Apps
         {
             var file = uploadImage.File;
 
-            var image = await assetThumbnailGenerator.GetImageInfoAsync(file.OpenRead());
-
-            if (image == null)
+            using (var uploadStream = file.OpenRead())
             {
-                throw new ValidationException("File is not an image.");
+                var image = await assetThumbnailGenerator.GetImageInfoAsync(uploadStream);
+
+                if (image == null)
+                {
+                    throw new ValidationException("File is not an image.");
+                }
             }
 
-            await appImageStore.UploadAsync(uploadImage.AppId, file.OpenRead());
+            using (var uploadStream = file.OpenRead())
+            {
+                await appImageStore.UploadAsync(uploadImage.AppId, uploadStream);
+            }
         }
     }
 }
diff --git a/backend/src/Squidex.Domain.Apps.Entities/Assets/AssetCommandMiddleware.cs b/backend/src/Squidex.Domain.Apps.Entities/Assets/AssetCommandMiddleware.cs
index 4a268db7b..abfa36ac4 100644
--- a/backend/src/Squidex.Domain.Apps.Entities/Assets/AssetCommandMiddleware.cs
+++ b/backend/src/Squidex.Domain.Apps.Entities/Assets/AssetCommandMiddleware.cs
@@ -149,11 +149,14 @@ namespace Squidex.Domain.Apps.Entities.Assets
 
         private async Task EnrichWithHashAndUploadAsync(UploadAssetCommand command, string tempFile)
         {
-            using (var hashStream = new HasherStream(command.File.OpenRead(), HashAlgorithmName.SHA256))
+            using (var uploadStream = command.File.OpenRead())
             {
-                await assetFileStore.UploadAsync(tempFile, hashStream);
+                using (var hashStream = new HasherStream(uploadStream, HashAlgorithmName.SHA256))
+                {
+                    await assetFileStore.UploadAsync(tempFile, hashStream);
 
-                command.FileHash = $"{hashStream.GetHashStringAndReset()}{command.File.FileName}{command.File.FileSize}".Sha256Base64();
+                    command.FileHash = $"{hashStream.GetHashStringAndReset()}{command.File.FileName}{command.File.FileSize}".Sha256Base64();
+                }
             }
         }
 
diff --git a/backend/src/Squidex.Domain.Apps.Entities/Assets/ImageAssetMetadataSource.cs b/backend/src/Squidex.Domain.Apps.Entities/Assets/ImageAssetMetadataSource.cs
index 52541e19a..36f8c924c 100644
--- a/backend/src/Squidex.Domain.Apps.Entities/Assets/ImageAssetMetadataSource.cs
+++ b/backend/src/Squidex.Domain.Apps.Entities/Assets/ImageAssetMetadataSource.cs
@@ -29,32 +29,35 @@ namespace Squidex.Domain.Apps.Entities.Assets
         {
             if (command.Type == AssetType.Unknown)
             {
-                var imageInfo = await assetThumbnailGenerator.GetImageInfoAsync(command.File.OpenRead());
-
-                if (imageInfo != null)
+                using (var uploadStream = command.File.OpenRead())
                 {
-                    command.Type = AssetType.Image;
-
-                    command.Metadata.SetPixelWidth(imageInfo.PixelWidth);
-                    command.Metadata.SetPixelHeight(imageInfo.PixelHeight);
+                    var imageInfo = await assetThumbnailGenerator.GetImageInfoAsync(uploadStream);
 
-                    if (tags != null)
+                    if (imageInfo != null)
                     {
-                        tags.Add("image");
+                        command.Type = AssetType.Image;
 
-                        var wh = imageInfo.PixelWidth + imageInfo.PixelHeight;
+                        command.Metadata.SetPixelWidth(imageInfo.PixelWidth);
+                        command.Metadata.SetPixelHeight(imageInfo.PixelHeight);
 
-                        if (wh > 2000)
-                        {
-                            tags.Add("image/large");
-                        }
-                        else if (wh > 1000)
+                        if (tags != null)
                         {
-                            tags.Add("image/medium");
-                        }
-                        else
-                        {
-                            tags.Add("image/small");
+                            tags.Add("image");
+
+                            var wh = imageInfo.PixelWidth + imageInfo.PixelHeight;
+
+                            if (wh > 2000)
+                            {
+                                tags.Add("image/large");
+                            }
+                            else if (wh > 1000)
+                            {
+                                tags.Add("image/medium");
+                            }
+                            else
+                            {
+                                tags.Add("image/small");
+                            }
                         }
                     }
                 }
diff --git a/backend/src/Squidex.Infrastructure/Assets/ImageSharp/ImageSharpAssetThumbnailGenerator.cs b/backend/src/Squidex.Infrastructure/Assets/ImageSharp/ImageSharpAssetThumbnailGenerator.cs
index 57063172e..fc8cc7330 100644
--- a/backend/src/Squidex.Infrastructure/Assets/ImageSharp/ImageSharpAssetThumbnailGenerator.cs
+++ b/backend/src/Squidex.Infrastructure/Assets/ImageSharp/ImageSharpAssetThumbnailGenerator.cs
@@ -77,19 +77,23 @@ namespace Squidex.Infrastructure.Assets.ImageSharp
 
         public Task<ImageInfo?> GetImageInfoAsync(Stream source)
         {
-            return Task.Run(() =>
+            ImageInfo? result = null;
+
+            try
             {
-                try
-                {
-                    var image = Image.Load(source);
+                var image = Image.Identify(source);
 
-                    return new ImageInfo(image.Width, image.Height);
-                }
-                catch
+                if (image != null)
                 {
-                    return null;
+                    result = new ImageInfo(image.Width, image.Height);
                 }
-            });
+            }
+            catch
+            {
+                result = null;
+            }
+
+            return Task.FromResult(result);
         }
     }
 }
diff --git a/backend/src/Squidex.Infrastructure/Collections/ArrayDictionary{TKey,TValue}.cs b/backend/src/Squidex.Infrastructure/Collections/ArrayDictionary{TKey,TValue}.cs
deleted file mode 100644
index b24827baf..000000000
--- a/backend/src/Squidex.Infrastructure/Collections/ArrayDictionary{TKey,TValue}.cs
+++ /dev/null
@@ -1,213 +0,0 @@
-// ==========================================================================
-//  Squidex Headless CMS
-// ==========================================================================
-//  Copyright (c) Squidex UG (haftungsbeschränkt)
-//  All rights reserved. Licensed under the MIT license.
-// ==========================================================================
-
-using System;
-using System.Collections;
-using System.Collections.Generic;
-using System.Diagnostics.CodeAnalysis;
-using System.Linq;
-
-#pragma warning disable IDE0044 // Add readonly modifier
-#pragma warning disable RECS0108 // Warns about static fields in generic types
-
-namespace Squidex.Infrastructure.Collections
-{
-    public class ArrayDictionary<TKey, TValue> : IReadOnlyDictionary<TKey, TValue> where TKey : notnull
-    {
-        private static readonly KeyValuePair<TKey, TValue>[] EmptyItems = Array.Empty<KeyValuePair<TKey, TValue>>();
-        private readonly IEqualityComparer<TKey> keyComparer;
-        private KeyValuePair<TKey, TValue>[] items;
-
-        public TValue this[TKey key]
-        {
-            get
-            {
-                if (!TryGetValue(key, out var value))
-                {
-                    throw new KeyNotFoundException();
-                }
-
-                return value;
-            }
-        }
-
-        public IEnumerable<TKey> Keys
-        {
-            get { return items.Select(x => x.Key); }
-        }
-
-        public IEnumerable<TValue> Values
-        {
-            get { return items.Select(x => x.Value); }
-        }
-
-        public int Count
-        {
-            get { return items.Length; }
-        }
-
-        public ArrayDictionary()
-            : this(EqualityComparer<TKey>.Default, EmptyItems)
-        {
-        }
-
-        public ArrayDictionary(KeyValuePair<TKey, TValue>[] items)
-            : this(EqualityComparer<TKey>.Default, items)
-        {
-        }
-
-        public ArrayDictionary(IEqualityComparer<TKey> keyComparer, KeyValuePair<TKey, TValue>[] items)
-        {
-            Guard.NotNull(items);
-            Guard.NotNull(keyComparer);
-
-            this.items = items;
-
-            this.keyComparer = keyComparer;
-        }
-
-        public bool IsUnchanged(KeyValuePair<TKey, TValue>[] values)
-        {
-            return ReferenceEquals(values, items);
-        }
-
-        public ArrayDictionary<TKey, TValue> With(TKey key, TValue value, IEqualityComparer<TValue>? valueComparer = null)
-        {
-            return With<ArrayDictionary<TKey, TValue>>(key, value, valueComparer);
-        }
-
-        public TArray With<TArray>(TKey key, TValue value, IEqualityComparer<TValue>? valueComparer = null) where TArray : ArrayDictionary<TKey, TValue>
-        {
-            var index = IndexOf(key);
-
-            if (index < 0)
-            {
-                var result = new KeyValuePair<TKey, TValue>[items.Length + 1];
-
-                Array.Copy(items, 0, result, 0, items.Length);
-
-                result[^1] = new KeyValuePair<TKey, TValue>(key, value);
-
-                return Create<TArray>(result);
-            }
-
-            var existing = items[index].Value;
-
-            if (valueComparer == null || !valueComparer.Equals(value, existing))
-            {
-                var result = new KeyValuePair<TKey, TValue>[items.Length];
-
-                Array.Copy(items, 0, result, 0, items.Length);
-
-                result[index] = new KeyValuePair<TKey, TValue>(key, value);
-
-                return Create<TArray>(result);
-            }
-
-            return Self<TArray>();
-        }
-
-        public ArrayDictionary<TKey, TValue> Without(TKey key)
-        {
-            return Without<ArrayDictionary<TKey, TValue>>(key);
-        }
-
-        public TArray Without<TArray>(TKey key) where TArray : ArrayDictionary<TKey, TValue>
-        {
-            var index = IndexOf(key);
-
-            if (index < 0)
-            {
-                return Self<TArray>();
-            }
-
-            if (Count == 1)
-            {
-                return Create<TArray>(EmptyItems);
-            }
-
-            var result = new KeyValuePair<TKey, TValue>[items.Length - 1];
-
-            Array.Copy(items, 0, result, 0, index);
-            Array.Copy(items, index + 1, result, index, items.Length - index - 1);
-
-            return Create<TArray>(result);
-        }
-
-        private TArray Self<TArray>() where TArray : ArrayDictionary<TKey, TValue>
-        {
-            return (this as TArray)!;
-        }
-
-        private TArray Create<TArray>(KeyValuePair<TKey, TValue>[] newItems) where TArray : ArrayDictionary<TKey, TValue>
-        {
-            if (ReferenceEquals(items, newItems))
-            {
-                return Self<TArray>();
-            }
-
-            var newClone = (TArray)MemberwiseClone();
-
-            newClone.items = newItems;
-
-            return newClone;
-        }
-
-        public bool ContainsKey(TKey key)
-        {
-            var index = IndexOf(key);
-
-            return index >= 0;
-        }
-
-        public bool TryGetValue(TKey key, [MaybeNullWhen(false)] out TValue value)
-        {
-            var index = IndexOf(key);
-
-            if (index >= 0)
-            {
-                value = items[index].Value;
-
-                return true;
-            }
-            else
-            {
-                value = default!;
-
-                return false;
-            }
-        }
-
-        private int IndexOf(TKey key)
-        {
-            for (var i = 0; i < items.Length; i++)
-            {
-                if (keyComparer.Equals(items[i].Key, key))
-                {
-                    return i;
-                }
-            }
-
-            return -1;
-        }
-
-        IEnumerator<KeyValuePair<TKey, TValue>> IEnumerable<KeyValuePair<TKey, TValue>>.GetEnumerator()
-        {
-            return GetEnumerable(items).GetEnumerator();
-        }
-
-        IEnumerator IEnumerable.GetEnumerator()
-        {
-            return items.GetEnumerator();
-        }
-
-        private static IEnumerable<T2> GetEnumerable<T2>(IEnumerable<T2> array)
-        {
-            return array;
-        }
-    }
-}
diff --git a/backend/src/Squidex.Infrastructure/Collections/ArrayDictionary.cs b/backend/src/Squidex.Infrastructure/Collections/ImmutableDictionary.cs
similarity index 59%
rename from backend/src/Squidex.Infrastructure/Collections/ArrayDictionary.cs
rename to backend/src/Squidex.Infrastructure/Collections/ImmutableDictionary.cs
index 0ac20b261..de9d8962c 100644
--- a/backend/src/Squidex.Infrastructure/Collections/ArrayDictionary.cs
+++ b/backend/src/Squidex.Infrastructure/Collections/ImmutableDictionary.cs
@@ -11,11 +11,11 @@ using System.Linq;
 
 namespace Squidex.Infrastructure.Collections
 {
-    public static class ArrayDictionary
+    public static class ImmutableDictionary
     {
-        public static ArrayDictionary<TKey, TValue> ToArrayDictionary<TKey, TValue>(this IEnumerable<TValue> source, Func<TValue, TKey> keyExtractor) where TKey : notnull
+        public static ImmutableDictionary<TKey, TValue> ToImmutableDictionary<TKey, TValue>(this IEnumerable<TValue> source, Func<TValue, TKey> keyExtractor) where TKey : notnull
         {
-            return new ArrayDictionary<TKey, TValue>(source.Select(x => new KeyValuePair<TKey, TValue>(keyExtractor(x), x)).ToArray());
+            return new ImmutableDictionary<TKey, TValue>(source.ToDictionary(keyExtractor));
         }
     }
 }
diff --git a/backend/src/Squidex.Infrastructure/Collections/ImmutableDictionary{TKey,TValue}.cs b/backend/src/Squidex.Infrastructure/Collections/ImmutableDictionary{TKey,TValue}.cs
new file mode 100644
index 000000000..05dc0ce04
--- /dev/null
+++ b/backend/src/Squidex.Infrastructure/Collections/ImmutableDictionary{TKey,TValue}.cs
@@ -0,0 +1,150 @@
+// ==========================================================================
+//  Squidex Headless CMS
+// ==========================================================================
+//  Copyright (c) Squidex UG (haftungsbeschränkt)
+//  All rights reserved. Licensed under the MIT license.
+// ==========================================================================
+
+using System.Collections;
+using System.Collections.Generic;
+using System.Diagnostics.CodeAnalysis;
+
+#pragma warning disable IDE0044 // Add readonly modifier
+#pragma warning disable RECS0108 // Warns about static fields in generic types
+
+namespace Squidex.Infrastructure.Collections
+{
+    public class ImmutableDictionary<TKey, TValue> : IReadOnlyDictionary<TKey, TValue> where TKey : notnull
+    {
+        private static readonly Dictionary<TKey, TValue> EmptyInner = new Dictionary<TKey, TValue>();
+        private Dictionary<TKey, TValue> inner;
+
+        public TValue this[TKey key]
+        {
+            get
+            {
+                if (!TryGetValue(key, out var value))
+                {
+                    throw new KeyNotFoundException();
+                }
+
+                return value;
+            }
+        }
+
+        public IEnumerable<TKey> Keys
+        {
+            get { return inner.Keys; }
+        }
+
+        public IEnumerable<TValue> Values
+        {
+            get { return inner.Values; }
+        }
+
+        public int Count
+        {
+            get { return inner.Count; }
+        }
+
+        public ImmutableDictionary()
+            : this(EmptyInner)
+        {
+        }
+
+        public ImmutableDictionary(Dictionary<TKey, TValue> inner)
+        {
+            Guard.NotNull(inner);
+
+            this.inner = inner;
+        }
+
+        public ImmutableDictionary<TKey, TValue> With(TKey key, TValue value, IEqualityComparer<TValue>? valueComparer = null)
+        {
+            return With<ImmutableDictionary<TKey, TValue>>(key, value, valueComparer);
+        }
+
+        public TArray With<TArray>(TKey key, TValue value, IEqualityComparer<TValue>? valueComparer = null) where TArray : ImmutableDictionary<TKey, TValue>
+        {
+            if (!TryGetValue(key, out var found) || !IsEqual(value, found, valueComparer))
+            {
+                var clone = new Dictionary<TKey, TValue>(inner)
+                {
+                    [key] = value
+                };
+
+                return Create<TArray>(clone);
+            }
+
+            return Self<TArray>();
+        }
+
+        private static bool IsEqual(TValue lhs, TValue rhs, IEqualityComparer<TValue>? comparer = null)
+        {
+            return comparer == null || comparer.Equals(lhs, rhs);
+        }
+
+        public ImmutableDictionary<TKey, TValue> Without(TKey key)
+        {
+            return Without<ImmutableDictionary<TKey, TValue>>(key);
+        }
+
+        public TArray Without<TArray>(TKey key) where TArray : ImmutableDictionary<TKey, TValue>
+        {
+            if (!inner.ContainsKey(key))
+            {
+                return Self<TArray>();
+            }
+
+            if (Count == 1)
+            {
+                return Create<TArray>(EmptyInner);
+            }
+
+            var clone = new Dictionary<TKey, TValue>(inner);
+
+            clone.Remove(key);
+
+            return Create<TArray>(clone);
+        }
+
+        private TArray Self<TArray>() where TArray : ImmutableDictionary<TKey, TValue>
+        {
+            return (this as TArray)!;
+        }
+
+        private TArray Create<TArray>(Dictionary<TKey, TValue> clone) where TArray : ImmutableDictionary<TKey, TValue>
+        {
+            var newClone = (TArray)MemberwiseClone();
+
+            newClone.inner = clone;
+
+            return newClone;
+        }
+
+        public bool ContainsKey(TKey key)
+        {
+            return inner.ContainsKey(key);
+        }
+
+        public bool TryGetValue(TKey key, [MaybeNullWhen(false)] out TValue value)
+        {
+            return inner.TryGetValue(key, out value);
+        }
+
+        IEnumerator<KeyValuePair<TKey, TValue>> IEnumerable<KeyValuePair<TKey, TValue>>.GetEnumerator()
+        {
+            return GetEnumerable(inner).GetEnumerator();
+        }
+
+        IEnumerator IEnumerable.GetEnumerator()
+        {
+            return inner.GetEnumerator();
+        }
+
+        private static IEnumerable<TItem> GetEnumerable<TItem>(IEnumerable<TItem> collection)
+        {
+            return collection;
+        }
+    }
+}
diff --git a/backend/src/Squidex/Areas/Frontend/Middlewares/WebpackMiddleware.cs b/backend/src/Squidex/Areas/Frontend/Middlewares/WebpackMiddleware.cs
index 60d8d7add..e48578cd0 100644
--- a/backend/src/Squidex/Areas/Frontend/Middlewares/WebpackMiddleware.cs
+++ b/backend/src/Squidex/Areas/Frontend/Middlewares/WebpackMiddleware.cs
@@ -16,6 +16,7 @@ namespace Squidex.Areas.Frontend.Middlewares
     public sealed class WebpackMiddleware
     {
         private const string WebpackUrl = "http://localhost:3000/index.html";
+
         private readonly RequestDelegate next;
 
         public WebpackMiddleware(RequestDelegate next)
diff --git a/backend/tests/Squidex.Domain.Apps.Core.Tests/Model/Apps/RolesTests.cs b/backend/tests/Squidex.Domain.Apps.Core.Tests/Model/Apps/RolesTests.cs
index 38a6674e0..ccce68319 100644
--- a/backend/tests/Squidex.Domain.Apps.Core.Tests/Model/Apps/RolesTests.cs
+++ b/backend/tests/Squidex.Domain.Apps.Core.Tests/Model/Apps/RolesTests.cs
@@ -6,6 +6,7 @@
 // ==========================================================================
 
 using System;
+using System.Collections.Generic;
 using System.Linq;
 using FluentAssertions;
 using Squidex.Domain.Apps.Core.Apps;
@@ -30,7 +31,7 @@ namespace Squidex.Domain.Apps.Core.Model.Apps
         [Fact]
         public void Should_create_roles_without_defaults()
         {
-            var roles = new Roles(Roles.Defaults.ToArray());
+            var roles = new Roles(new Dictionary<string, Role>(Roles.Defaults));
 
             Assert.Equal(0, roles.CustomCount);
         }
diff --git a/frontend/app-config/webpack.config.js b/frontend/app-config/webpack.config.js
index e022f7ede..f2f73a323 100644
--- a/frontend/app-config/webpack.config.js
+++ b/frontend/app-config/webpack.config.js
@@ -37,6 +37,8 @@ module.exports = function (env) {
     const isCoverage = env && env.coverage;
     const isAot = isProduction;
 
+    const configFile = isTests ? 'tsconfig.spec.json' : 'tsconfig.app.json';
+
     const config = {
         mode: isProduction ? 'production' : 'development',
 
@@ -66,7 +68,9 @@ module.exports = function (env) {
             ],
 
             plugins: [
-                new plugins.TsconfigPathsPlugin()
+                new plugins.TsconfigPathsPlugin({
+                    configFile
+                })
             ]
         },
 
@@ -145,6 +149,10 @@ module.exports = function (env) {
                 }, {
                     loader: 'sass-loader', 
                     options: {
+                        prependData: `
+                            @import '_vars';
+                            @import '_mixins';
+                        `,
                         sassOptions: {
                             includePaths: [root('app', 'theme')]
                         }
@@ -285,7 +293,7 @@ module.exports = function (env) {
                 entryModule: 'app/app.module#AppModule',
                 sourceMap: !isProduction,
                 skipCodeGeneration: !isAot,
-                tsConfigPath: './tsconfig.json'
+                tsConfigPath: configFile
             })
         );
     }
diff --git a/frontend/app/app.component.scss b/frontend/app/app.component.scss
index fbb752506..e69de29bb 100644
--- a/frontend/app/app.component.scss
+++ b/frontend/app/app.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/administration/administration-area.component.scss b/frontend/app/features/administration/administration-area.component.scss
index 23f99dbeb..e69de29bb 100644
--- a/frontend/app/features/administration/administration-area.component.scss
+++ b/frontend/app/features/administration/administration-area.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
diff --git a/frontend/app/features/administration/pages/cluster/cluster-page.component.scss b/frontend/app/features/administration/pages/cluster/cluster-page.component.scss
index 4ec84ebe0..8fec000ae 100644
--- a/frontend/app/features/administration/pages/cluster/cluster-page.component.scss
+++ b/frontend/app/features/administration/pages/cluster/cluster-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 iframe {
     @include absolute(0, 0, 0, 0);
     @include force-height(100%);
diff --git a/frontend/app/features/administration/pages/event-consumers/event-consumer.component.html b/frontend/app/features/administration/pages/event-consumers/event-consumer.component.html
new file mode 100644
index 000000000..7cb6bc732
--- /dev/null
+++ b/frontend/app/features/administration/pages/event-consumers/event-consumer.component.html
@@ -0,0 +1,24 @@
+<tr [class.faulted]="eventConsumer.error && eventConsumer.error?.length > 0">
+    <td class="cell-auto">
+        <span class="truncate">
+            <i class="faulted-icon icon icon-bug" (click)="error.emit()" [class.hidden]="!eventConsumer.error || eventConsumer.error?.length === 0"></i>
+
+            {{eventConsumer.name}}
+        </span>
+    </td>
+    <td class="cell-auto-right">
+        <span>{{eventConsumer.position}}</span>
+    </td>
+    <td class="cell-actions-lg">
+        <button type="button" class="btn btn-text" (click)="reset()" *ngIf="eventConsumer.canReset" title="Reset Event Consumer">
+            <i class="icon icon-reset"></i>
+        </button>
+        <button type="button" class="btn btn-text" (click)="start()" *ngIf="eventConsumer.canStart" title="Start Event Consumer">
+            <i class="icon icon-play"></i>
+        </button>
+        <button type="button" class="btn btn-text" (click)="stop()" *ngIf="eventConsumer.canStop" title="Stop Event Consumer">
+            <i class="icon icon-pause"></i>
+        </button>
+    </td>
+</tr>
+<tr class="spacer"></tr>
\ No newline at end of file
diff --git a/frontend/app/features/administration/pages/event-consumers/event-consumer.component.scss b/frontend/app/features/administration/pages/event-consumers/event-consumer.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts b/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts
index b0029a3d3..0c10f0a23 100644
--- a/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts
+++ b/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts
@@ -13,32 +13,8 @@ import { EventConsumerDto, EventConsumersState } from '@app/features/administrat
 
 @Component({
     selector: '[sqxEventConsumer]',
-    template: `
-        <tr [class.faulted]="eventConsumer.error && eventConsumer.error?.length > 0">
-            <td class="cell-auto">
-                <span class="truncate">
-                    <i class="faulted-icon icon icon-bug" (click)="error.emit()" [class.hidden]="!eventConsumer.error || eventConsumer.error?.length === 0"></i>
-
-                    {{eventConsumer.name}}
-                </span>
-            </td>
-            <td class="cell-auto-right">
-                <span>{{eventConsumer.position}}</span>
-            </td>
-            <td class="cell-actions-lg">
-                <button type="button" class="btn btn-text" (click)="reset()" *ngIf="eventConsumer.canReset" title="Reset Event Consumer">
-                    <i class="icon icon-reset"></i>
-                </button>
-                <button type="button" class="btn btn-text" (click)="start()" *ngIf="eventConsumer.canStart" title="Start Event Consumer">
-                    <i class="icon icon-play"></i>
-                </button>
-                <button type="button" class="btn btn-text" (click)="stop()" *ngIf="eventConsumer.canStop" title="Stop Event Consumer">
-                    <i class="icon icon-pause"></i>
-                </button>
-            </td>
-        </tr>
-        <tr class="spacer"></tr>
-    `,
+    styleUrls: ['./event-consumer.component.scss'],
+    templateUrl: './event-consumer.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EventConsumerComponent {
diff --git a/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.scss b/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.scss
index 954eadba8..d95275ca7 100644
--- a/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.scss
+++ b/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .faulted {
     & {
         color: $color-theme-error;
diff --git a/frontend/app/features/administration/pages/restore/restore-page.component.scss b/frontend/app/features/administration/pages/restore/restore-page.component.scss
index 7a16e83c5..97a5ad8c9 100644
--- a/frontend/app/features/administration/pages/restore/restore-page.component.scss
+++ b/frontend/app/features/administration/pages/restore/restore-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 $circle-size: 2rem;
 
 h3 {
diff --git a/frontend/app/features/administration/pages/users/user-page.component.scss b/frontend/app/features/administration/pages/users/user-page.component.scss
index 8f81aae0d..68f973372 100644
--- a/frontend/app/features/administration/pages/users/user-page.component.scss
+++ b/frontend/app/features/administration/pages/users/user-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .form-group-section {
     margin-top: 2rem;
 }
diff --git a/frontend/app/features/administration/pages/users/user.component.html b/frontend/app/features/administration/pages/users/user.component.html
new file mode 100644
index 000000000..10bbadc86
--- /dev/null
+++ b/frontend/app/features/administration/pages/users/user.component.html
@@ -0,0 +1,20 @@
+<tr [routerLink]="user.id" routerLinkActive="active">
+    <td class="cell-user">
+        <img class="user-picture" title="{{user.displayName}}" [src]="user | sqxUserDtoPicture" />
+    </td>
+    <td class="cell-auto">
+        <span class="user-name table-cell">{{user.displayName}}</span>
+    </td>
+    <td class="cell-auto">
+        <span class="user-email table-cell">{{user.email}}</span>
+    </td>
+    <td class="cell-actions">
+        <button type="button" class="btn btn-text" (click)="lock()" sqxStopClick *ngIf="user.canLock" title="Lock User">
+            <i class="icon icon-unlocked"></i>
+        </button>
+        <button type="button" class="btn btn-text" (click)="unlock()" sqxStopClick *ngIf="user.canUnlock" title="Unlock User">
+            <i class="icon icon-lock"></i>
+        </button>
+    </td>
+</tr>
+<tr class="spacer"></tr>
\ No newline at end of file
diff --git a/frontend/app/features/administration/pages/users/user.component.scss b/frontend/app/features/administration/pages/users/user.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/administration/pages/users/user.component.ts b/frontend/app/features/administration/pages/users/user.component.ts
index f8a3452ce..864980464 100644
--- a/frontend/app/features/administration/pages/users/user.component.ts
+++ b/frontend/app/features/administration/pages/users/user.component.ts
@@ -13,28 +13,8 @@ import { UserDto, UsersState } from '@app/features/administration/internal';
 
 @Component({
     selector: '[sqxUser]',
-    template: `
-        <tr [routerLink]="user.id" routerLinkActive="active">
-            <td class="cell-user">
-                <img class="user-picture" title="{{user.displayName}}" [src]="user | sqxUserDtoPicture" />
-            </td>
-            <td class="cell-auto">
-                <span class="user-name table-cell">{{user.displayName}}</span>
-            </td>
-            <td class="cell-auto">
-                <span class="user-email table-cell">{{user.email}}</span>
-            </td>
-            <td class="cell-actions">
-                <button type="button" class="btn btn-text" (click)="lock()" sqxStopClick *ngIf="user.canLock" title="Lock User">
-                    <i class="icon icon-unlocked"></i>
-                </button>
-                <button type="button" class="btn btn-text" (click)="unlock()" sqxStopClick *ngIf="user.canUnlock" title="Unlock User">
-                    <i class="icon icon-lock"></i>
-                </button>
-            </td>
-        </tr>
-        <tr class="spacer"></tr>
-    `,
+    styleUrls: ['./user.component.scss'],
+    templateUrl: './user.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class UserComponent {
diff --git a/frontend/app/features/administration/pages/users/users-page.component.scss b/frontend/app/features/administration/pages/users/users-page.component.scss
index fbb752506..e69de29bb 100644
--- a/frontend/app/features/administration/pages/users/users-page.component.scss
+++ b/frontend/app/features/administration/pages/users/users-page.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/administration/state/users.forms.ts b/frontend/app/features/administration/state/users.forms.ts
index 2e2ed5ba6..6664e24b0 100644
--- a/frontend/app/features/administration/state/users.forms.ts
+++ b/frontend/app/features/administration/state/users.forms.ts
@@ -1,3 +1,10 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { Form, ValidatorsEx } from '@app/shared';
diff --git a/frontend/app/features/api/api-area.component.scss b/frontend/app/features/api/api-area.component.scss
index 6df2bffe7..b2868ce86 100644
--- a/frontend/app/features/api/api-area.component.scss
+++ b/frontend/app/features/api/api-area.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .nav-link {
     padding-bottom: .6rem;
     padding-top: .6rem;
diff --git a/frontend/app/features/api/pages/graphql/graphql-page.component.scss b/frontend/app/features/api/pages/graphql/graphql-page.component.scss
index 4cebc196f..65c2f82e1 100644
--- a/frontend/app/features/api/pages/graphql/graphql-page.component.scss
+++ b/frontend/app/features/api/pages/graphql/graphql-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 // Graphiql hints
 ::ng-deep {
     @import '~graphiql/dist/show-hint';
diff --git a/frontend/app/features/apps/pages/apps-page.component.scss b/frontend/app/features/apps/pages/apps-page.component.scss
index d83f82dc7..ab35fad84 100644
--- a/frontend/app/features/apps/pages/apps-page.component.scss
+++ b/frontend/app/features/apps/pages/apps-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .apps {
     &-title {
         font-size: 1.4rem;
diff --git a/frontend/app/features/apps/pages/news-dialog.component.html b/frontend/app/features/apps/pages/news-dialog.component.html
index 70c0f1625..e25557216 100644
--- a/frontend/app/features/apps/pages/news-dialog.component.html
+++ b/frontend/app/features/apps/pages/news-dialog.component.html
@@ -1,4 +1,4 @@
-<sqx-modal-dialog large="true" (close)="emitClose()">
+<sqx-modal-dialog size="lg" (close)="close.emit()">
     <ng-container title>
         New Features
     </ng-container>
diff --git a/frontend/app/features/apps/pages/news-dialog.component.scss b/frontend/app/features/apps/pages/news-dialog.component.scss
index 274b04219..bcc87b52b 100644
--- a/frontend/app/features/apps/pages/news-dialog.component.scss
+++ b/frontend/app/features/apps/pages/news-dialog.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host ::ng-deep {
     img {
         @include box-shadow(0, 4px, 20px, .2);
diff --git a/frontend/app/features/apps/pages/news-dialog.component.ts b/frontend/app/features/apps/pages/news-dialog.component.ts
index 5683be87b..6ffeff783 100644
--- a/frontend/app/features/apps/pages/news-dialog.component.ts
+++ b/frontend/app/features/apps/pages/news-dialog.component.ts
@@ -21,10 +21,6 @@ export class NewsDialogComponent {
     @Input()
     public features: ReadonlyArray<FeatureDto>;
 
-    public emitClose() {
-        this.close.emit();
-    }
-
     public trackByFeature(index: number, feature: FeatureDto) {
         return feature;
     }
diff --git a/frontend/app/features/apps/pages/onboarding-dialog.component.html b/frontend/app/features/apps/pages/onboarding-dialog.component.html
index dce2eaed4..9c9996613 100644
--- a/frontend/app/features/apps/pages/onboarding-dialog.component.html
+++ b/frontend/app/features/apps/pages/onboarding-dialog.component.html
@@ -1,6 +1,6 @@
 <sqx-modal-dialog [showHeader]="false">
     <ng-container content>
-        <a class="header-right modal-close" (click)="emitClose()">Skip Tour</a>
+        <a class="header-right modal-close" (click)="close.emit()">Skip Tour</a>
 
         <div class="onboarding-step" *ngIf="step === 0">
             <img @fade class="header-left" src="./images/logo-white-small.png" />
diff --git a/frontend/app/features/apps/pages/onboarding-dialog.component.scss b/frontend/app/features/apps/pages/onboarding-dialog.component.scss
index 6a55f8584..2771a5399 100644
--- a/frontend/app/features/apps/pages/onboarding-dialog.component.scss
+++ b/frontend/app/features/apps/pages/onboarding-dialog.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 $size-width: 825px;
 $size-height: 576px;
 
diff --git a/frontend/app/features/apps/pages/onboarding-dialog.component.ts b/frontend/app/features/apps/pages/onboarding-dialog.component.ts
index 9d2ea10f6..53fe2a8d7 100644
--- a/frontend/app/features/apps/pages/onboarding-dialog.component.ts
+++ b/frontend/app/features/apps/pages/onboarding-dialog.component.ts
@@ -23,10 +23,6 @@ export class OnboardingDialogComponent {
     @Output()
     public close = new EventEmitter();
 
-    public emitClose() {
-        this.close.emit();
-    }
-
     public next() {
         this.step = this.step + 1;
     }
diff --git a/frontend/app/features/assets/declarations.ts b/frontend/app/features/assets/declarations.ts
index 317f83e41..365980ef5 100644
--- a/frontend/app/features/assets/declarations.ts
+++ b/frontend/app/features/assets/declarations.ts
@@ -6,4 +6,5 @@
  */
 
 export * from './pages/assets-filters-page.component';
-export * from './pages/assets-page.component';
\ No newline at end of file
+export * from './pages/assets-page.component';
+export * from './pages/asset-tags.component';
\ No newline at end of file
diff --git a/frontend/app/features/assets/module.ts b/frontend/app/features/assets/module.ts
index bcfb24292..0b65d9fe4 100644
--- a/frontend/app/features/assets/module.ts
+++ b/frontend/app/features/assets/module.ts
@@ -12,7 +12,8 @@ import { SqxFrameworkModule, SqxSharedModule } from '@app/shared';
 
 import {
     AssetsFiltersPageComponent,
-    AssetsPageComponent
+    AssetsPageComponent,
+    AssetTagsComponent
 } from './declarations';
 
 const routes: Routes = [
@@ -36,7 +37,8 @@ const routes: Routes = [
     ],
     declarations: [
         AssetsFiltersPageComponent,
-        AssetsPageComponent
+        AssetsPageComponent,
+        AssetTagsComponent
     ]
 })
 export class SqxFeatureAssetsModule {}
\ No newline at end of file
diff --git a/frontend/app/features/assets/pages/asset-tags.component.html b/frontend/app/features/assets/pages/asset-tags.component.html
new file mode 100644
index 000000000..2db48178b
--- /dev/null
+++ b/frontend/app/features/assets/pages/asset-tags.component.html
@@ -0,0 +1,18 @@
+<a class="sidebar-item" (click)="reset.emit()" [class.active]="isEmpty()">
+    <div class="row">
+        <div class="col">
+            All tags
+        </div>
+    </div>
+</a>
+
+<a class="sidebar-item" *ngFor="let tag of tags; trackBy: trackByTag" (click)="toggle.emit(tag.name)" [class.active]="isSelected(tag)">
+    <div class="row">
+        <div class="col">
+            {{tag.name}}
+        </div>
+        <div class="col-auto">
+            {{tag.count}}
+        </div>
+    </div>
+</a>
\ No newline at end of file
diff --git a/frontend/app/features/assets/pages/asset-tags.component.scss b/frontend/app/features/assets/pages/asset-tags.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/assets/pages/asset-tags.component.ts b/frontend/app/features/assets/pages/asset-tags.component.ts
new file mode 100644
index 000000000..f011ad8b4
--- /dev/null
+++ b/frontend/app/features/assets/pages/asset-tags.component.ts
@@ -0,0 +1,42 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { Tag, TagsSelected } from '@app/shared';
+
+@Component({
+    selector: 'sqx-asset-tags',
+    styleUrls: ['./asset-tags.component.scss'],
+    templateUrl: './asset-tags.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AssetTagsComponent {
+    @Output()
+    public reset = new EventEmitter();
+
+    @Output()
+    public toggle = new EventEmitter<string>();
+
+    @Input()
+    public tags: ReadonlyArray<Tag>;
+
+    @Input()
+    public tagsSelected: TagsSelected;
+
+    public isEmpty() {
+        return Object.keys(this.tagsSelected).length === 0;
+    }
+
+    public isSelected(tag: Tag) {
+        return this.tagsSelected[tag.name] === true;
+    }
+
+    public trackByTag(index: number, tag: Tag) {
+        return tag.name;
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/features/assets/pages/assets-filters-page.component.html b/frontend/app/features/assets/pages/assets-filters-page.component.html
index f3782afbe..917ecfc8d 100644
--- a/frontend/app/features/assets/pages/assets-filters-page.component.html
+++ b/frontend/app/features/assets/pages/assets-filters-page.component.html
@@ -6,32 +6,19 @@
     <ng-container content>
         <h3>Tags</h3>
 
-        <a class="sidebar-item" (click)="resetTags()" [class.active]="assetsState.isTagSelectionEmpty()">
-            <div class="row">
-                <div class="col">
-                    All tags
-                </div>
-            </div>
-        </a>
-
-        <a class="sidebar-item" *ngFor="let tag of assetsState.tags | async; trackBy: trackByTag" (click)="toggleTag(tag.name)"
-            [class.active]="assetsState.isTagSelected(tag.name)">
-            <div class="row">
-                <div class="col">
-                    {{tag.name}}
-                </div>
-                <div class="col-auto">
-                    {{tag.count}}
-                </div>
-            </div>
-        </a>
+        <sqx-asset-tags
+            (reset)="resetTags()"
+            [tags]="assetsState.tags | async"
+            [tagsSelected]="assetsState.tagsSelected | async"
+            (toggle)="toggleTag($event)">
+        </sqx-asset-tags>
 
         <hr />
 
         <sqx-shared-queries types="contents"
+            [queryUsed]="assetsState.assetsQuery | async"
             [queries]="assetsQueries"
-            [queryUsed]="isQueryUsed"
-            (search)="search($event.query)">
+            (search)="search($event)">
         </sqx-shared-queries>
     </ng-container>
 </sqx-panel>
\ No newline at end of file
diff --git a/frontend/app/features/assets/pages/assets-filters-page.component.scss b/frontend/app/features/assets/pages/assets-filters-page.component.scss
index fbb752506..e69de29bb 100644
--- a/frontend/app/features/assets/pages/assets-filters-page.component.scss
+++ b/frontend/app/features/assets/pages/assets-filters-page.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/assets/pages/assets-filters-page.component.ts b/frontend/app/features/assets/pages/assets-filters-page.component.ts
index a1f6c576c..2435d4159 100644
--- a/frontend/app/features/assets/pages/assets-filters-page.component.ts
+++ b/frontend/app/features/assets/pages/assets-filters-page.component.ts
@@ -11,7 +11,6 @@ import {
     AssetsState,
     Queries,
     Query,
-    SavedQuery,
     UIState
 } from '@app/shared';
 
@@ -29,10 +28,6 @@ export class AssetsFiltersPageComponent {
     ) {
     }
 
-    public isQueryUsed = (query: SavedQuery) => {
-        return this.assetsState.isQueryUsed(query);
-    }
-
     public search(query: Query) {
         this.assetsState.search(query);
     }
diff --git a/frontend/app/features/assets/pages/assets-page.component.scss b/frontend/app/features/assets/pages/assets-page.component.scss
index 5976607b7..4be6c4e55 100644
--- a/frontend/app/features/assets/pages/assets-page.component.scss
+++ b/frontend/app/features/assets/pages/assets-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .search ::ng-deep {
     .form-control {
         @include border-radius-right;
diff --git a/frontend/app/features/content/declarations.ts b/frontend/app/features/content/declarations.ts
index 0dff4286a..b0c8fee37 100644
--- a/frontend/app/features/content/declarations.ts
+++ b/frontend/app/features/content/declarations.ts
@@ -15,21 +15,24 @@ export * from './pages/contents/contents-page.component';
 export * from './pages/contents/custom-view-editor.component';
 export * from './pages/schemas/schemas-page.component';
 
-export * from './shared/array-editor.component';
-export * from './shared/array-item.component';
-export * from './shared/assets-editor.component';
-export * from './shared/content-list-cell.directive';
-export * from './shared/content-list-field.component';
-export * from './shared/content-list-header.component';
-export * from './shared/content-selector-item.component';
 export * from './shared/content-status.component';
-export * from './shared/content-value-editor.component';
-export * from './shared/content-value.component';
-export * from './shared/content.component';
-export * from './shared/contents-selector.component';
 export * from './shared/due-time-selector.component';
-export * from './shared/field-editor.component';
 export * from './shared/preview-button.component';
-export * from './shared/reference-item.component';
-export * from './shared/references-editor.component';
-export * from './shared/stock-photo-editor.component';
\ No newline at end of file
+
+export * from './shared/forms/array-editor.component';
+export * from './shared/forms/array-item.component';
+export * from './shared/forms/assets-editor.component';
+export * from './shared/forms/field-editor.component';
+export * from './shared/forms/stock-photo-editor.component';
+
+export * from './shared/list/content-list-cell.directive';
+export * from './shared/list/content-list-field.component';
+export * from './shared/list/content-list-header.component';
+export * from './shared/list/content-value-editor.component';
+export * from './shared/list/content-value.component';
+export * from './shared/list/content.component';
+
+export * from './shared/references/content-selector-item.component';
+export * from './shared/references/content-selector.component';
+export * from './shared/references/reference-item.component';
+export * from './shared/references/references-editor.component';
\ No newline at end of file
diff --git a/frontend/app/features/content/module.ts b/frontend/app/features/content/module.ts
index 5e89aae4c..c1bcbd580 100644
--- a/frontend/app/features/content/module.ts
+++ b/frontend/app/features/content/module.ts
@@ -32,10 +32,10 @@ import {
     ContentListHeaderComponent,
     ContentListWidthPipe,
     ContentPageComponent,
+    ContentSelectorComponent,
     ContentSelectorItemComponent,
     ContentsFiltersPageComponent,
     ContentsPageComponent,
-    ContentsSelectorComponent,
     ContentStatusComponent,
     ContentValueComponent,
     ContentValueEditorComponent,
@@ -118,16 +118,16 @@ const routes: Routes = [
         CommentsPageComponent,
         ContentComponent,
         ContentFieldComponent,
+        ContentHistoryPageComponent,
         ContentListCellDirective,
-        ContentListWidthPipe,
         ContentListFieldComponent,
         ContentListHeaderComponent,
-        ContentHistoryPageComponent,
+        ContentListWidthPipe,
         ContentPageComponent,
+        ContentSelectorComponent,
         ContentSelectorItemComponent,
         ContentsFiltersPageComponent,
         ContentsPageComponent,
-        ContentsSelectorComponent,
         ContentStatusComponent,
         ContentValueComponent,
         ContentValueEditorComponent,
diff --git a/frontend/app/features/content/pages/comments/comments-page.component.scss b/frontend/app/features/content/pages/comments/comments-page.component.scss
index 23f99dbeb..e69de29bb 100644
--- a/frontend/app/features/content/pages/comments/comments-page.component.scss
+++ b/frontend/app/features/content/pages/comments/comments-page.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
diff --git a/frontend/app/features/content/pages/content/content-field.component.html b/frontend/app/features/content/pages/content/content-field.component.html
index 034c25fdb..970faac5e 100644
--- a/frontend/app/features/content/pages/content/content-field.component.html
+++ b/frontend/app/features/content/pages/content/content-field.component.html
@@ -9,7 +9,7 @@
                 <sqx-field-languages 
                     [field]="field"
                     [language]="language"
-                    (languageChange)="emitLanguageChange($event)"
+                    (languageChange)="languageChange.emit($event)"
                     [languages]="languages"
                     [showAllControls]="showAllControls"
                     (showAllControlsChange)="changeShowAllControls($event)">
@@ -67,7 +67,7 @@
                 <sqx-field-languages 
                     [field]="field"
                     [language]="language"
-                    (languageChange)="emitLanguageChange($event)"
+                    (languageChange)="languageChange.emit($event)"
                     [languages]="languages"
                     [showAllControls]="showAllControls"
                     (showAllControlsChange)="changeShowAllControls($event)">
diff --git a/frontend/app/features/content/pages/content/content-field.component.scss b/frontend/app/features/content/pages/content/content-field.component.scss
index 28167804c..338171a33 100644
--- a/frontend/app/features/content/pages/content/content-field.component.scss
+++ b/frontend/app/features/content/pages/content/content-field.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .table-items-row {
     border-left-width: 4px;
     position: relative;
diff --git a/frontend/app/features/content/pages/content/content-field.component.ts b/frontend/app/features/content/pages/content/content-field.component.ts
index cb6dec4b6..44343aa8d 100644
--- a/frontend/app/features/content/pages/content/content-field.component.ts
+++ b/frontend/app/features/content/pages/content/content-field.component.ts
@@ -90,7 +90,7 @@ export class ContentFieldComponent implements DoCheck, OnChanges {
             this.isDifferent =
                 value$(this.fieldForm).pipe(
                     combineLatest(value$(this.fieldFormCompare),
-                        (lhs, rhs) => !Types.jsJsonEquals(lhs, rhs)));
+                        (lhs, rhs) => !Types.equals(lhs, rhs)));
         }
     }
 
@@ -184,10 +184,6 @@ export class ContentFieldComponent implements DoCheck, OnChanges {
         }
     }
 
-    public emitLanguageChange(language: AppLanguageDto) {
-        this.languageChange.emit(language);
-    }
-
     public prefix(language: AppLanguageDto) {
         return `(${language.iso2Code})`;
     }
diff --git a/frontend/app/features/content/pages/content/content-history-page.component.scss b/frontend/app/features/content/pages/content/content-history-page.component.scss
index 4ad344afa..c8b4c3272 100644
--- a/frontend/app/features/content/pages/content/content-history-page.component.scss
+++ b/frontend/app/features/content/pages/content/content-history-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host ::ng-deep {
     .user-ref {
         font-weight: 500;
diff --git a/frontend/app/features/content/pages/content/content-page.component.scss b/frontend/app/features/content/pages/content/content-page.component.scss
index c89a1b370..e639f7c75 100644
--- a/frontend/app/features/content/pages/content/content-page.component.scss
+++ b/frontend/app/features/content/pages/content/content-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .btn-status {
     margin-left: 2rem;
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/content/field-languages.component.html b/frontend/app/features/content/pages/content/field-languages.component.html
new file mode 100644
index 000000000..b651ab7e5
--- /dev/null
+++ b/frontend/app/features/content/pages/content/field-languages.component.html
@@ -0,0 +1,17 @@
+<ng-container *ngIf="field.isLocalizable && languages.length > 1">
+    <button *ngIf="!field.properties.isComplexUI" type="button" class="btn btn-text-secondary btn-sm mr-1" (click)="toggleShowAllControls()">
+        {{showAllControls ? 'Single Language' : 'All Languages'}}
+    </button>
+
+    <ng-container *ngIf="field.properties.isComplexUI || !showAllControls">
+        <sqx-language-selector size="sm" #buttonLanguages
+            [selectedLanguage]="language"
+            (selectedLanguageChange)="languageChange.emit($event)"
+            [languages]="languages">
+        </sqx-language-selector>
+
+        <sqx-onboarding-tooltip helpId="languages" [for]="buttonLanguages" position="top-right" after="120000">
+            Please remember to check all languages when you see validation errors.
+        </sqx-onboarding-tooltip>
+    </ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/content/field-languages.component.scss b/frontend/app/features/content/pages/content/field-languages.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/content/pages/content/field-languages.component.ts b/frontend/app/features/content/pages/content/field-languages.component.ts
index 57f58868b..90c3a071b 100644
--- a/frontend/app/features/content/pages/content/field-languages.component.ts
+++ b/frontend/app/features/content/pages/content/field-languages.component.ts
@@ -11,43 +11,30 @@ import { AppLanguageDto, RootFieldDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-field-languages',
-    template: `
-        <ng-container *ngIf="field.isLocalizable && languages.length > 1">
-            <button *ngIf="!field.properties.isComplexUI" type="button" class="btn btn-text-secondary btn-sm mr-1" (click)="showAllControlsChange.emit(!showAllControls)">
-                {{showAllControls ? 'Single Language' : 'All Languages'}}
-            </button>
-
-            <ng-container *ngIf="field.properties.isComplexUI || !showAllControls">
-                <sqx-language-selector size="sm" #buttonLanguages
-                    [selectedLanguage]="language"
-                    (selectedLanguageChange)="languageChange.emit($event)"
-                    [languages]="languages">
-                </sqx-language-selector>
-
-                <sqx-onboarding-tooltip helpId="languages" [for]="buttonLanguages" position="top-right" after="120000">
-                    Please remember to check all languages when you see validation errors.
-                </sqx-onboarding-tooltip>
-            </ng-container>
-        </ng-container>
-    `,
+    styleUrls: ['./field-languages.component.scss'],
+    templateUrl: './field-languages.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FieldLanguagesComponent {
-    @Output()
-    public languageChange = new EventEmitter<AppLanguageDto>();
-
     @Output()
     public showAllControlsChange = new EventEmitter<boolean>();
 
-    @Input()
-    public field: RootFieldDto;
-
     @Input()
     public showAllControls: boolean;
 
+    @Output()
+    public languageChange = new EventEmitter<AppLanguageDto>();
+
     @Input()
     public language: AppLanguageDto;
 
     @Input()
     public languages: ReadonlyArray<AppLanguageDto>;
+
+    @Input()
+    public field: RootFieldDto;
+
+    public toggleShowAllControls() {
+        this.showAllControlsChange.emit(this.showAllControls);
+    }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/contents/contents-filters-page.component.html b/frontend/app/features/content/pages/contents/contents-filters-page.component.html
index 3cf873ff7..93ef1ba82 100644
--- a/frontend/app/features/content/pages/contents/contents-filters-page.component.html
+++ b/frontend/app/features/content/pages/contents/contents-filters-page.component.html
@@ -4,29 +4,30 @@
     </ng-container>
 
     <ng-container content>
-        <a class="sidebar-item" *ngFor="let default of schemaQueries.defaultQueries; trackBy: trackByQuery" (click)="search(default.query)"
-            [class.active]="isQueryUsed(default)">
-            {{default.name}}
-        </a>
+        <sqx-query-list
+            [queryUsed]="contentsState.contentsQuery | async"
+            [queries]="schemaQueries.defaultQueries"
+            (search)="search($event)">
+        </sqx-query-list>
 
         <hr />
 
         <div class="sidebar-section">
             <h3>Status Queries</h3>
 
-            <a class="sidebar-item status" *ngFor="let status of contentsState.statusQueries | async; trackBy: trackByQuery" (click)="search(status.query)"
-                [class.active]="isQueryUsed(status)">
-                
-                <i class="icon-circle" [style.color]="status.color"></i> {{status.name}}
-            </a>
+            <sqx-query-list
+                [queryUsed]="contentsState.contentsQuery | async"
+                [queries]="contentsState.statusQueries | async"
+                (search)="search($event)">
+            </sqx-query-list>
         </div>
 
         <hr />
 
         <sqx-shared-queries types="contents"
+            [queryUsed]="contentsState.contentsQuery | async"
             [queries]="schemaQueries"
-            [queryUsed]="isQueryUsed"
-            (search)="search($event.query)">
+            (search)="search($event)">
         </sqx-shared-queries>
     </ng-container>
 </sqx-panel>
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/contents/contents-filters-page.component.scss b/frontend/app/features/content/pages/contents/contents-filters-page.component.scss
index d2ed5db4c..d010862a6 100644
--- a/frontend/app/features/content/pages/contents/contents-filters-page.component.scss
+++ b/frontend/app/features/content/pages/contents/contents-filters-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .status {
     @include truncate;
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/contents/contents-filters-page.component.ts b/frontend/app/features/content/pages/contents/contents-filters-page.component.ts
index 7a5afb66c..8432c095b 100644
--- a/frontend/app/features/content/pages/contents/contents-filters-page.component.ts
+++ b/frontend/app/features/content/pages/contents/contents-filters-page.component.ts
@@ -12,7 +12,6 @@ import {
     Queries,
     Query,
     ResourceOwner,
-    SavedQuery,
     SchemasState,
     UIState
 } from '@app/shared';
@@ -41,15 +40,7 @@ export class ContentsFiltersPageComponent extends ResourceOwner implements OnIni
                 }));
     }
 
-    public isQueryUsed = (query: SavedQuery) => {
-        return this.contentsState.isQueryUsed(query);
-    }
-
     public search(query: Query) {
         this.contentsState.search(query);
     }
-
-    public trackByQuery(index: number, query: { name: string }) {
-        return query.name;
-    }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/contents/contents-page.component.scss b/frontend/app/features/content/pages/contents/contents-page.component.scss
index 8cd27279f..97f69b49c 100644
--- a/frontend/app/features/content/pages/contents/contents-page.component.scss
+++ b/frontend/app/features/content/pages/contents/contents-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .content {
     cursor: pointer;
 }
@@ -27,6 +24,7 @@
 
     &-button {
         @include absolute(null, 1rem, -2.375rem);
+        z-index: 1000;
     }
 }
 
diff --git a/frontend/app/features/content/pages/contents/custom-view-editor.component.html b/frontend/app/features/content/pages/contents/custom-view-editor.component.html
index 7694e2233..44bf8b6f1 100644
--- a/frontend/app/features/content/pages/contents/custom-view-editor.component.html
+++ b/frontend/app/features/content/pages/contents/custom-view-editor.component.html
@@ -7,16 +7,16 @@
     
     <hr />
 
-    <div
+    <div 
         cdkDropList
         [cdkDropListData]="fieldNames"
         (cdkDropListDropped)="drop($event)">
     
-        <div *ngFor="let field of fieldNames; trackBy: random" cdkDrag>
+        <div *ngFor="let field of fieldNames" cdkDrag>
             <i class="icon-drag2 drag-handle"></i> 
             
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" checked (change)="removeField(field)" id="field_{{field}}">
+                <input class="form-check-input" type="checkbox" checked (click)="removeField(field)" id="field_{{field}}">
                 <label class="form-check-label" for="field_{{field}}">
                     {{field}}
                 </label>
@@ -31,7 +31,7 @@
             <i class="icon-drag2 drag-handle invisible"></i> 
 
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" (change)="addField(field)" id="field_{{field}}">
+                <input class="form-check-input" type="checkbox" (click)="addField(field)" id="field_{{field}}">
                 <label class="form-check-label" for="field_{{field}}">
                     {{field}}
                 </label>
diff --git a/frontend/app/features/content/pages/contents/custom-view-editor.component.scss b/frontend/app/features/content/pages/contents/custom-view-editor.component.scss
index 40149ec7f..9f16730f8 100644
--- a/frontend/app/features/content/pages/contents/custom-view-editor.component.scss
+++ b/frontend/app/features/content/pages/contents/custom-view-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .container {
     max-height: 400px;
     overflow-x: hidden;
diff --git a/frontend/app/features/content/pages/contents/custom-view-editor.component.ts b/frontend/app/features/content/pages/contents/custom-view-editor.component.ts
index 44fa1c0bd..a21df2f08 100644
--- a/frontend/app/features/content/pages/contents/custom-view-editor.component.ts
+++ b/frontend/app/features/content/pages/contents/custom-view-editor.component.ts
@@ -17,14 +17,14 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Out
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CustomViewEditorComponent implements OnChanges {
-    @Input()
-    public allFields: ReadonlyArray<string>;
+    @Output()
+    public fieldNamesChange = new EventEmitter<ReadonlyArray<string>>();
 
     @Input()
     public fieldNames: ReadonlyArray<string>;
 
-    @Output()
-    public fieldNamesChange = new EventEmitter<ReadonlyArray<string>>();
+    @Input()
+    public allFields: ReadonlyArray<string>;
 
     public fieldsNotAdded: ReadonlyArray<string>;
 
@@ -32,29 +32,25 @@ export class CustomViewEditorComponent implements OnChanges {
         this.fieldsNotAdded = this.allFields.filter(n => this.fieldNames.indexOf(n) < 0);
     }
 
-    public random() {
-        return Math.random();
-    }
-
     public drop(event: CdkDragDrop<string[]>) {
         moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
 
-        this.updateFields(event.container.data);
-    }
-
-    public updateFields(fieldNames: ReadonlyArray<string>) {
-        this.fieldNamesChange.emit(fieldNames);
+        this.updateFieldNames(event.container.data);
     }
 
     public resetDefault() {
-        this.updateFields([]);
+        this.updateFieldNames([]);
     }
 
     public addField(field: string) {
-        this.updateFields([...this.fieldNames, field]);
+        this.updateFieldNames([...this.fieldNames, field]);
     }
 
     public removeField(field: string) {
-        this.updateFields(this.fieldNames.filter(x => x !== field));
+        this.updateFieldNames(this.fieldNames.filter(x => x !== field));
+    }
+
+    private updateFieldNames(fieldNames: ReadonlyArray<string>) {
+        this.fieldNamesChange.emit(fieldNames);
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/schemas/schemas-page.component.scss b/frontend/app/features/content/pages/schemas/schemas-page.component.scss
index a54223a3d..b0392cfd1 100644
--- a/frontend/app/features/content/pages/schemas/schemas-page.component.scss
+++ b/frontend/app/features/content/pages/schemas/schemas-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .btn-collapse {
     & {
         font-size: 1.2rem;
diff --git a/frontend/app/features/content/shared/content-list-field.component.ts b/frontend/app/features/content/shared/content-list-field.component.ts
deleted file mode 100644
index c419be5f3..000000000
--- a/frontend/app/features/content/shared/content-list-field.component.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-
-import {
-    ContentDto,
-    getContentValue,
-    LanguageDto,
-    MetaFields,
-    RootFieldDto,
-    TableField,
-    Types
-} from '@app/shared';
-
-@Component({
-    selector: 'sqx-content-list-field',
-    template: `
-        <ng-container [ngSwitch]="fieldName">
-            <ng-container *ngSwitchCase="metaFields.id">
-                <small class="truncate">{{content.id}}</small>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.created">
-                <small class="truncate">{{content.created | sqxFromNow}}</small>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.createdByAvatar">
-                <img class="user-picture" title="{{content.createdBy | sqxUserNameRef}}" [src]="content.createdBy | sqxUserPictureRef" />
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.createdByName">
-                <small class="truncate">{{content.createdBy | sqxUserNameRef}}</small>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.lastModified">
-                <small class="truncate">{{content.lastModified | sqxFromNow}}</small>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.lastModifiedByAvatar">
-                <img class="user-picture" title="{{content.lastModifiedBy | sqxUserNameRef}}" [src]="content.lastModifiedBy | sqxUserPictureRef" />
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.lastModifiedByName">
-                <small class="truncate">{{content.lastModifiedBy | sqxUserNameRef}}</small>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.status">
-                <span class="truncate">
-                    <sqx-content-status
-                        [status]="content.status"
-                        [statusColor]="content.statusColor"
-                        [scheduledTo]="content.scheduleJob?.status"
-                        [scheduledAt]="content.scheduleJob?.dueTime"
-                        [isPending]="content.isPending">
-                    </sqx-content-status>
-
-                    {{content.status}}
-                </span>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.statusNext">
-                <span class="truncate" *ngIf="content.scheduleJob; let job">
-                    {{job.status}} at {{job.dueTime | sqxShortDate}}
-                </span>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.statusColor">
-                <sqx-content-status
-                    [status]="content.status"
-                    [statusColor]="content.statusColor"
-                    [scheduledTo]="content.scheduleJob?.status"
-                    [scheduledAt]="content.scheduleJob?.dueTime"
-                    [isPending]="content.isPending">
-                </sqx-content-status>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.version">
-                <small class="truncate">{{content.version.value}}</small>
-            </ng-container>
-            <ng-container *ngSwitchDefault>
-                <ng-container *ngIf="isInlineEditable && patchAllowed; else displayTemplate">
-                    <sqx-content-value-editor [form]="patchForm" [field]="field"></sqx-content-value-editor>
-                </ng-container>
-
-                <ng-template #displayTemplate>
-                    <sqx-content-value [value]="value"></sqx-content-value>
-                </ng-template>
-            </ng-container>
-        </ng-container>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ContentListFieldComponent implements OnChanges {
-    @Input()
-    public field: TableField;
-
-    @Input()
-    public content: ContentDto;
-
-    @Input()
-    public patchAllowed: boolean;
-
-    @Input()
-    public patchForm: FormGroup;
-
-    @Input()
-    public language: LanguageDto;
-
-    public value: any;
-
-    public ngOnChanges() {
-        this.reset();
-    }
-
-    public reset() {
-        if (Types.is(this.field, RootFieldDto)) {
-            const { value, formatted } = getContentValue(this.content, this.language, this.field);
-
-            if (this.patchForm) {
-                const formControl = this.patchForm.controls[this.field.name];
-
-                if (formControl) {
-                    formControl.setValue(value);
-                }
-            }
-
-            this.value = formatted;
-        }
-    }
-
-    public get metaFields() {
-        return MetaFields;
-    }
-
-    public get isInlineEditable() {
-        return Types.is(this.field, RootFieldDto) ? this.field.isInlineEditable : false;
-    }
-
-    public get fieldName() {
-        return Types.is(this.field, RootFieldDto) ? this.field.name : this.field;
-    }
-}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/content-list-header.component.ts b/frontend/app/features/content/shared/content-list-header.component.ts
deleted file mode 100644
index e35e31b72..000000000
--- a/frontend/app/features/content/shared/content-list-header.component.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-import {
-    LanguageDto,
-    MetaFields,
-    Query,
-    RootFieldDto,
-    TableField,
-    Types
-} from '@app/shared';
-
-@Component({
-    selector: 'sqx-content-list-header',
-    template: `
-        <ng-container [ngSwitch]="fieldName">
-            <ng-container *ngSwitchCase="metaFields.id">
-                <sqx-table-header text="Id"></sqx-table-header>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.created">
-                <sqx-table-header text="Created"
-                    [sortable]="true"
-                    [fieldPath]="'created'"
-                    [query]="query"
-                    (queryChange)="queryChange.emit($event)"
-                    [language]="language">
-                </sqx-table-header>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.createdByAvatar">
-                <sqx-table-header text="By"></sqx-table-header>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.createdByName">
-                <sqx-table-header text="Created By"></sqx-table-header>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.lastModified">
-                <sqx-table-header text="Updated"
-                    [sortable]="true"
-                    [fieldPath]="'lastModified'"
-                    [query]="query"
-                    (queryChange)="queryChange.emit($event)"
-                    [language]="language">
-                </sqx-table-header>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.lastModifiedByAvatar">
-                <sqx-table-header text="By"></sqx-table-header>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.lastModifiedByName">
-                <sqx-table-header text="Modified By"></sqx-table-header>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.status">
-                <sqx-table-header text="Status"></sqx-table-header>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.statusNext">
-                <sqx-table-header text="Next Status"></sqx-table-header>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.statusColor">
-                <sqx-table-header text="Status"></sqx-table-header>
-            </ng-container>
-            <ng-container *ngSwitchCase="metaFields.version">
-                <sqx-table-header text="Version"></sqx-table-header>
-            </ng-container>
-            <ng-container *ngSwitchDefault>
-                <sqx-table-header [text]="fieldDisplayName"
-                    [sortable]="isSortable"
-                    [fieldPath]="fieldPath"
-                    [query]="query"
-                    (queryChange)="queryChange.emit($event)"
-                    [language]="language">
-                </sqx-table-header>
-            </ng-container>
-        </ng-container>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ContentListHeaderComponent {
-    @Input()
-    public field: TableField;
-
-    @Output()
-    public queryChange = new EventEmitter<Query>();
-
-    @Input()
-    public query: Query;
-
-    @Input()
-    public language: LanguageDto;
-
-    public get metaFields() {
-        return MetaFields;
-    }
-
-    public get isSortable() {
-        return Types.is(this.field, RootFieldDto) ? this.field.properties.isSortable : false;
-    }
-
-    public get fieldName() {
-        return Types.is(this.field, RootFieldDto) ? this.field.name : this.field;
-    }
-
-    public get fieldDisplayName() {
-        return Types.is(this.field, RootFieldDto) ? this.field.displayName : '';
-    }
-
-    public get fieldPath() {
-        if (Types.isString(this.field)) {
-            return this.field;
-        } else if (this.field.isLocalizable && this.language) {
-            return `data.${this.field.name}.${this.language.iso2Code}`;
-        } else {
-            return `data.${this.field.name}.iv`;
-        }
-    }
-}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/content-selector-item.component.ts b/frontend/app/features/content/shared/content-selector-item.component.ts
deleted file mode 100644
index ba882ba56..000000000
--- a/frontend/app/features/content/shared/content-selector-item.component.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-import {
-    ContentDto,
-    LanguageDto,
-    SchemaDetailsDto
-} from '@app/shared';
-
-/* tslint:disable:component-selector */
-
-@Component({
-    selector: '[sqxContentSelectorItem]',
-    template: `
-        <tr (click)="toggle()">
-            <td class="cell-select" sqxStopClick>
-                <input type="checkbox" class="form-check"
-                    [disabled]="!selectable"
-                    [ngModel]="selected || !selectable"
-                    (ngModelChange)="emitSelectedChange($event)" />
-            </td>
-
-            <td sqxContentListCell="meta.lastModifiedBy.avatar">
-                <sqx-content-list-field field="meta.lastModifiedBy.avatar" [content]="content" [language]="language"></sqx-content-list-field>
-            </td>
-
-            <td *ngFor="let field of schema.defaultReferenceFields" [sqxContentListCell]="field">
-                <sqx-content-list-field [field]="field" [content]="content" [language]="language"></sqx-content-list-field>
-            </td>
-        </tr>
-        <tr class="spacer"></tr>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ContentSelectorItemComponent {
-    @Output()
-    public selectedChange = new EventEmitter<boolean>();
-
-    @Input()
-    public selected = false;
-
-    @Input()
-    public selectable = true;
-
-    @Input()
-    public language: LanguageDto;
-
-    @Input()
-    public schema: SchemaDetailsDto;
-
-    @Input('sqxContentSelectorItem')
-    public content: ContentDto;
-
-    public toggle() {
-        if (this.selectable) {
-            this.emitSelectedChange(!this.selected);
-        }
-    }
-
-    public emitSelectedChange(isSelected: boolean) {
-        this.selectedChange.emit(isSelected);
-    }
-}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/content-status.component.scss b/frontend/app/features/content/shared/content-status.component.scss
index 1d78232ef..d7ea4cbbd 100644
--- a/frontend/app/features/content/shared/content-status.component.scss
+++ b/frontend/app/features/content/shared/content-status.component.scss
@@ -1,5 +1,3 @@
-@import '_vars';
-@import '_mixins';
 
 .content-status {
     &.default {
diff --git a/frontend/app/features/content/shared/content-value-editor.component.ts b/frontend/app/features/content/shared/content-value-editor.component.ts
deleted file mode 100644
index 7e50ea128..000000000
--- a/frontend/app/features/content/shared/content-value-editor.component.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-
-import { FieldDto } from '@app/shared';
-
-@Component({
-    selector: 'sqx-content-value-editor',
-    template: `
-        <div [formGroup]="form">
-            <ng-container [ngSwitch]="field.properties.fieldType">
-                <ng-container *ngSwitchCase="'Number'">
-                    <ng-container [ngSwitch]="field.rawProperties.editor">
-                        <ng-container *ngSwitchCase="'Input'">
-                            <input class="form-control" type="number" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
-                        </ng-container>
-						<ng-container *ngSwitchCase="'Stars'">
-							<sqx-stars [formControlName]="field.name" [maximumStars]="field.rawProperties.maxValue"></sqx-stars>
-						</ng-container>
-                        <ng-container *ngSwitchCase="'Dropdown'">
-                            <select class="form-control" [formControlName]="field.name">
-                                <option [ngValue]="null"></option>
-                                <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
-                            </select>
-                        </ng-container>
-                    </ng-container>
-                </ng-container>
-                <ng-container *ngSwitchCase="'String'">
-                    <ng-container [ngSwitch]="field.rawProperties.editor">
-                        <ng-container *ngSwitchCase="'Input'">
-                            <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
-                        </ng-container>
-                        <ng-container *ngSwitchCase="'Slug'">
-                            <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify" />
-                        </ng-container>
-                        <ng-container *ngSwitchCase="'Dropdown'">
-                            <select class="form-control" [formControlName]="field.name">
-                                <option [ngValue]="null"></option>
-                                <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
-                            </select>
-                        </ng-container>
-                    </ng-container>
-                </ng-container>
-                <ng-container *ngSwitchCase="'Boolean'">
-                    <ng-container [ngSwitch]="field.rawProperties.editor">
-                        <ng-container *ngSwitchCase="'Toggle'">
-                            <sqx-toggle [formControlName]="field.name" [threeStates]="!field.properties.isRequired"></sqx-toggle>
-                        </ng-container>
-                        <ng-container *ngSwitchCase="'Checkbox'">
-                            <ng-container class="form-check form-check-inline">
-                                <input class="form-check-input" type="checkbox" [formControlName]="field.name" sqxIndeterminateValue />
-                            </ng-container>
-                        </ng-container>
-                    </ng-container>
-                </ng-container>
-            </ng-container>
-        </div>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ContentValueEditorComponent {
-    @Input()
-    public field: FieldDto;
-
-    @Input()
-    public form: FormGroup;
-}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/content-value.component.ts b/frontend/app/features/content/shared/content-value.component.ts
deleted file mode 100644
index 2ef4f9d47..000000000
--- a/frontend/app/features/content/shared/content-value.component.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-import { HtmlValue, Types } from '@app/shared';
-
-@Component({
-    selector: 'sqx-content-value',
-    template: `
-        <ng-container *ngIf="isPlain; else html">
-            <span class="truncate">{{value}}</span>
-        </ng-container>
-        <ng-template #html>
-            <span class="html-value" [innerHTML]="value.html"></span>
-        </ng-template>
-    `,
-    styles: [`
-        .html-value {
-            position: relative;
-        }
-        ::ng-deep .html-value img {
-            position: absolute;
-            min-height: 50px;
-            max-height: 50px;
-            margin-top: -25px;
-        }`
-    ],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ContentValueComponent {
-    @Input()
-    public value: any;
-
-    public get isPlain() {
-        return !Types.is(this.value, HtmlValue);
-    }
-}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/due-time-selector.component.scss b/frontend/app/features/content/shared/due-time-selector.component.scss
index fbb752506..e69de29bb 100644
--- a/frontend/app/features/content/shared/due-time-selector.component.scss
+++ b/frontend/app/features/content/shared/due-time-selector.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/due-time-selector.component.ts b/frontend/app/features/content/shared/due-time-selector.component.ts
index 80bb89d6b..c91a08a41 100644
--- a/frontend/app/features/content/shared/due-time-selector.component.ts
+++ b/frontend/app/features/content/shared/due-time-selector.component.ts
@@ -16,25 +16,26 @@ import { DialogModel } from '@app/shared';
     templateUrl: './due-time-selector.component.html'
 })
 export class DueTimeSelectorComponent {
+    private dueTimeResult: Subject<string | null>;
+
     public dueTimeDialog = new DialogModel();
     public dueTime: string | null = '';
-    public dueTimeFunction: Subject<string | null>;
     public dueTimeAction: string | null = '';
     public dueTimeMode = 'Immediately';
 
     public selectDueTime(action: string): Observable<string | null> {
         this.dueTimeAction = action;
-        this.dueTimeFunction = new Subject<string | null>();
+        this.dueTimeResult = new Subject<string | null>();
         this.dueTimeDialog.show();
 
-        return this.dueTimeFunction;
+        return this.dueTimeResult;
     }
 
     public confirmStatusChange() {
         const result = this.dueTimeMode === 'Immediately' ? null : this.dueTime;
 
-        this.dueTimeFunction.next(result);
-        this.dueTimeFunction.complete();
+        this.dueTimeResult.next(result);
+        this.dueTimeResult.complete();
 
         this.cancelStatusChange();
     }
@@ -42,7 +43,7 @@ export class DueTimeSelectorComponent {
     public cancelStatusChange() {
         this.dueTimeMode = 'Immediately';
         this.dueTimeDialog.hide();
-        this.dueTimeFunction = null!;
+        this.dueTimeResult = null!;
         this.dueTime = null;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/array-editor.component.html b/frontend/app/features/content/shared/forms/array-editor.component.html
similarity index 100%
rename from frontend/app/features/content/shared/array-editor.component.html
rename to frontend/app/features/content/shared/forms/array-editor.component.html
diff --git a/frontend/app/features/content/shared/array-editor.component.scss b/frontend/app/features/content/shared/forms/array-editor.component.scss
similarity index 82%
rename from frontend/app/features/content/shared/array-editor.component.scss
rename to frontend/app/features/content/shared/forms/array-editor.component.scss
index b08fbfc17..7eae62567 100644
--- a/frontend/app/features/content/shared/array-editor.component.scss
+++ b/frontend/app/features/content/shared/forms/array-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .array-container {
     background: $color-border;
     margin-bottom: 1rem;
diff --git a/frontend/app/features/content/shared/array-editor.component.ts b/frontend/app/features/content/shared/forms/array-editor.component.ts
similarity index 100%
rename from frontend/app/features/content/shared/array-editor.component.ts
rename to frontend/app/features/content/shared/forms/array-editor.component.ts
diff --git a/frontend/app/features/content/shared/array-item.component.html b/frontend/app/features/content/shared/forms/array-item.component.html
similarity index 86%
rename from frontend/app/features/content/shared/array-item.component.html
rename to frontend/app/features/content/shared/forms/array-item.component.html
index b04a064d6..f440c1e20 100644
--- a/frontend/app/features/content/shared/array-item.component.html
+++ b/frontend/app/features/content/shared/forms/array-item.component.html
@@ -11,16 +11,16 @@
                 </div>
             </div>
             <div class="col-auto pr-4">
-                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isFirst" (click)="emitMoveTop()">
+                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isFirst" (click)="moveTop()">
                     <i class="icon-caret-top"></i>
                 </button>
-                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isFirst" (click)="emitMoveUp()">
+                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isFirst" (click)="moveUp()">
                     <i class="icon-caret-up"></i>
                 </button>
-                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isLast" (click)="emitMoveDown()">
+                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isLast" (click)="moveDown()">
                     <i class="icon-caret-down"></i>
                 </button>
-                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isLast" (click)="emitMoveBottom()">
+                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isLast" (click)="moveBottom()">
                     <i class="icon-caret-bottom"></i>
                 </button>
                 <button type="button" class="btn btn-text-secondary" [class.hidden]="!isHidden" (click)="expand()" title="Expand this item">
@@ -31,11 +31,11 @@
                 </button>
             </div>
             <div class="col-auto">
-                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled" (click)="emitClone()">
+                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled" (click)="clone.emit()">
                     <i class="icon-clone"></i>
                 </button>
         
-                <button type="button" class="btn btn-text-danger" [disabled]="isDisabled" (click)="emitRemove()">
+                <button type="button" class="btn btn-text-danger" [disabled]="isDisabled" (click)="remove.emit()">
                     <i class="icon-bin2"></i>
                 </button>
             </div>
diff --git a/frontend/app/features/content/shared/array-item.component.scss b/frontend/app/features/content/shared/forms/array-item.component.scss
similarity index 94%
rename from frontend/app/features/content/shared/array-item.component.scss
rename to frontend/app/features/content/shared/forms/array-item.component.scss
index f07387916..c77818339 100644
--- a/frontend/app/features/content/shared/array-item.component.scss
+++ b/frontend/app/features/content/shared/forms/array-item.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host ::ng-deep {
     .ui-separator {
         border-color: $color-border !important;
diff --git a/frontend/app/features/content/shared/array-item.component.ts b/frontend/app/features/content/shared/forms/array-item.component.ts
similarity index 94%
rename from frontend/app/features/content/shared/array-item.component.ts
rename to frontend/app/features/content/shared/forms/array-item.component.ts
index 88ba73fbd..1feaee056 100644
--- a/frontend/app/features/content/shared/array-item.component.ts
+++ b/frontend/app/features/content/shared/forms/array-item.component.ts
@@ -155,27 +155,19 @@ export class ArrayItemComponent implements OnChanges, OnDestroy {
         this.changeDetector.markForCheck();
     }
 
-    public emitClone() {
-        this.clone.emit();
-    }
-
-    public emitRemove() {
-        this.remove.emit();
-    }
-
-    public emitMoveTop() {
+    public moveTop() {
         this.move.emit(0);
     }
 
-    public emitMoveUp() {
+    public moveUp() {
         this.move.emit(this.index - 1);
     }
 
-    public emitMoveDown() {
+    public moveDown() {
         this.move.emit(this.index + 1);
     }
 
-    public emitMoveBottom() {
+    public moveBottom() {
         this.move.emit(99999);
     }
 
diff --git a/frontend/app/features/content/shared/assets-editor.component.html b/frontend/app/features/content/shared/forms/assets-editor.component.html
similarity index 100%
rename from frontend/app/features/content/shared/assets-editor.component.html
rename to frontend/app/features/content/shared/forms/assets-editor.component.html
diff --git a/frontend/app/features/content/shared/assets-editor.component.scss b/frontend/app/features/content/shared/forms/assets-editor.component.scss
similarity index 96%
rename from frontend/app/features/content/shared/assets-editor.component.scss
rename to frontend/app/features/content/shared/forms/assets-editor.component.scss
index 6734b4757..86fc2ead1 100644
--- a/frontend/app/features/content/shared/assets-editor.component.scss
+++ b/frontend/app/features/content/shared/forms/assets-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .disabled {
     pointer-events: none;
 }
diff --git a/frontend/app/features/content/shared/assets-editor.component.ts b/frontend/app/features/content/shared/forms/assets-editor.component.ts
similarity index 95%
rename from frontend/app/features/content/shared/assets-editor.component.ts
rename to frontend/app/features/content/shared/forms/assets-editor.component.ts
index db7935fcf..b7e81eaf6 100644
--- a/frontend/app/features/content/shared/assets-editor.component.ts
+++ b/frontend/app/features/content/shared/forms/assets-editor.component.ts
@@ -45,11 +45,12 @@ interface State {
     selector: 'sqx-assets-editor',
     styleUrls: ['./assets-editor.component.scss'],
     templateUrl: './assets-editor.component.html',
-    providers: [SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-// tslint:disable-next-line: readonly-array
-export class AssetsEditorComponent extends StatefulControlComponent<State, string[]> implements OnInit {
+export class AssetsEditorComponent extends StatefulControlComponent<State, ReadonlyArray<string>> implements OnInit {
     @Input()
     public isCompact = false;
 
@@ -70,7 +71,7 @@ export class AssetsEditorComponent extends StatefulControlComponent<State, strin
 
     public writeValue(obj: any) {
         if (Types.isArrayOfString(obj)) {
-            if (!Types.isEquals(obj, this.snapshot.assets.map(x => x.id))) {
+            if (!Types.equals(obj, this.snapshot.assets.map(x => x.id))) {
                 const assetIds: string[] = obj;
 
                 this.assetsService.getAssets(this.appsState.appName, 0, 0, undefined, undefined, obj)
diff --git a/frontend/app/features/content/shared/field-editor.component.html b/frontend/app/features/content/shared/forms/field-editor.component.html
similarity index 100%
rename from frontend/app/features/content/shared/field-editor.component.html
rename to frontend/app/features/content/shared/forms/field-editor.component.html
diff --git a/frontend/app/features/content/shared/field-editor.component.scss b/frontend/app/features/content/shared/forms/field-editor.component.scss
similarity index 92%
rename from frontend/app/features/content/shared/field-editor.component.scss
rename to frontend/app/features/content/shared/forms/field-editor.component.scss
index f363be204..907653b31 100644
--- a/frontend/app/features/content/shared/field-editor.component.scss
+++ b/frontend/app/features/content/shared/forms/field-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .field {
     &-required {
         color: $color-theme-error;
diff --git a/frontend/app/features/content/shared/field-editor.component.ts b/frontend/app/features/content/shared/forms/field-editor.component.ts
similarity index 100%
rename from frontend/app/features/content/shared/field-editor.component.ts
rename to frontend/app/features/content/shared/forms/field-editor.component.ts
diff --git a/frontend/app/features/content/shared/stock-photo-editor.component.html b/frontend/app/features/content/shared/forms/stock-photo-editor.component.html
similarity index 100%
rename from frontend/app/features/content/shared/stock-photo-editor.component.html
rename to frontend/app/features/content/shared/forms/stock-photo-editor.component.html
diff --git a/frontend/app/features/content/shared/stock-photo-editor.component.scss b/frontend/app/features/content/shared/forms/stock-photo-editor.component.scss
similarity index 97%
rename from frontend/app/features/content/shared/stock-photo-editor.component.scss
rename to frontend/app/features/content/shared/forms/stock-photo-editor.component.scss
index 2cdc7af75..dd568d8e6 100644
--- a/frontend/app/features/content/shared/stock-photo-editor.component.scss
+++ b/frontend/app/features/content/shared/forms/stock-photo-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 $color-user-background: rgba(0, 0, 0, .5);
 $color-background: #000;
 
diff --git a/frontend/app/features/content/shared/stock-photo-editor.component.ts b/frontend/app/features/content/shared/forms/stock-photo-editor.component.ts
similarity index 97%
rename from frontend/app/features/content/shared/stock-photo-editor.component.ts
rename to frontend/app/features/content/shared/forms/stock-photo-editor.component.ts
index 8a7fe090d..53eaf9a42 100644
--- a/frontend/app/features/content/shared/stock-photo-editor.component.ts
+++ b/frontend/app/features/content/shared/forms/stock-photo-editor.component.ts
@@ -30,7 +30,9 @@ export const SQX_STOCK_PHOTO_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-stock-photo-editor',
     styleUrls: ['./stock-photo-editor.component.scss'],
     templateUrl: './stock-photo-editor.component.html',
-    providers: [SQX_STOCK_PHOTO_EDITOR_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_STOCK_PHOTO_EDITOR_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StockPhotoEditorComponent extends StatefulControlComponent<State, string> implements OnInit {
diff --git a/frontend/app/features/content/shared/content-list-cell.directive.ts b/frontend/app/features/content/shared/list/content-list-cell.directive.ts
similarity index 100%
rename from frontend/app/features/content/shared/content-list-cell.directive.ts
rename to frontend/app/features/content/shared/list/content-list-cell.directive.ts
diff --git a/frontend/app/features/content/shared/list/content-list-field.component.html b/frontend/app/features/content/shared/list/content-list-field.component.html
new file mode 100644
index 000000000..917135d06
--- /dev/null
+++ b/frontend/app/features/content/shared/list/content-list-field.component.html
@@ -0,0 +1,62 @@
+<ng-container [ngSwitch]="fieldName">
+    <ng-container *ngSwitchCase="metaFields.id">
+        <small class="truncate">{{content.id}}</small>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.created">
+        <small class="truncate">{{content.created | sqxFromNow}}</small>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.createdByAvatar">
+        <img class="user-picture" title="{{content.createdBy | sqxUserNameRef}}" [src]="content.createdBy | sqxUserPictureRef" />
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.createdByName">
+        <small class="truncate">{{content.createdBy | sqxUserNameRef}}</small>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.lastModified">
+        <small class="truncate">{{content.lastModified | sqxFromNow}}</small>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.lastModifiedByAvatar">
+        <img class="user-picture" title="{{content.lastModifiedBy | sqxUserNameRef}}" [src]="content.lastModifiedBy | sqxUserPictureRef" />
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.lastModifiedByName">
+        <small class="truncate">{{content.lastModifiedBy | sqxUserNameRef}}</small>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.status">
+        <span class="truncate">
+            <sqx-content-status
+                [status]="content.status"
+                [statusColor]="content.statusColor"
+                [scheduledTo]="content.scheduleJob?.status"
+                [scheduledAt]="content.scheduleJob?.dueTime"
+                [isPending]="content.isPending">
+            </sqx-content-status>
+
+            {{content.status}}
+        </span>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.statusNext">
+        <span class="truncate" *ngIf="content.scheduleJob">
+            {{content.scheduleJob.status}} at {{content.scheduleJob.dueTime | sqxShortDate}}
+        </span>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.statusColor">
+        <sqx-content-status
+            [status]="content.status"
+            [statusColor]="content.statusColor"
+            [scheduledTo]="content.scheduleJob?.status"
+            [scheduledAt]="content.scheduleJob?.dueTime"
+            [isPending]="content.isPending">
+        </sqx-content-status>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.version">
+        <small class="truncate">{{content.version.value}}</small>
+    </ng-container>
+    <ng-container *ngSwitchDefault>
+        <ng-container *ngIf="isInlineEditable && patchAllowed; else displayTemplate">
+            <sqx-content-value-editor [form]="patchForm" [field]="field"></sqx-content-value-editor>
+        </ng-container>
+
+        <ng-template #displayTemplate>
+            <sqx-content-value [value]="value"></sqx-content-value>
+        </ng-template>
+    </ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/list/content-list-field.component.scss b/frontend/app/features/content/shared/list/content-list-field.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/content/shared/list/content-list-field.component.ts b/frontend/app/features/content/shared/list/content-list-field.component.ts
new file mode 100644
index 000000000..637342aca
--- /dev/null
+++ b/frontend/app/features/content/shared/list/content-list-field.component.ts
@@ -0,0 +1,76 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import {
+    ContentDto,
+    getContentValue,
+    LanguageDto,
+    MetaFields,
+    RootFieldDto,
+    TableField,
+    Types
+} from '@app/shared';
+
+@Component({
+    selector: 'sqx-content-list-field',
+    styleUrls: ['./content-list-field.component.scss'],
+    templateUrl: './content-list-field.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContentListFieldComponent implements OnChanges {
+    @Input()
+    public field: TableField;
+
+    @Input()
+    public content: ContentDto;
+
+    @Input()
+    public patchAllowed: boolean;
+
+    @Input()
+    public patchForm: FormGroup;
+
+    @Input()
+    public language: LanguageDto;
+
+    public value: any;
+
+    public ngOnChanges() {
+        this.reset();
+    }
+
+    public reset() {
+        if (Types.is(this.field, RootFieldDto)) {
+            const { value, formatted } = getContentValue(this.content, this.language, this.field);
+
+            if (this.patchForm) {
+                const formControl = this.patchForm.controls[this.field.name];
+
+                if (formControl) {
+                    formControl.setValue(value);
+                }
+            }
+
+            this.value = formatted;
+        }
+    }
+
+    public get metaFields() {
+        return MetaFields;
+    }
+
+    public get isInlineEditable() {
+        return Types.is(this.field, RootFieldDto) ? this.field.isInlineEditable : false;
+    }
+
+    public get fieldName() {
+        return Types.is(this.field, RootFieldDto) ? this.field.name : this.field;
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/list/content-list-header.component.html b/frontend/app/features/content/shared/list/content-list-header.component.html
new file mode 100644
index 000000000..707012dc1
--- /dev/null
+++ b/frontend/app/features/content/shared/list/content-list-header.component.html
@@ -0,0 +1,56 @@
+<ng-container [ngSwitch]="fieldName">
+    <ng-container *ngSwitchCase="metaFields.id">
+        <sqx-table-header text="Id"></sqx-table-header>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.created">
+        <sqx-table-header text="Created"
+            [sortable]="true"
+            [fieldPath]="'created'"
+            [query]="query"
+            (queryChange)="queryChange.emit($event)"
+            [language]="language">
+        </sqx-table-header>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.createdByAvatar">
+        <sqx-table-header text="By"></sqx-table-header>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.createdByName">
+        <sqx-table-header text="Created By"></sqx-table-header>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.lastModified">
+        <sqx-table-header text="Updated"
+            [sortable]="true"
+            [fieldPath]="'lastModified'"
+            [query]="query"
+            (queryChange)="queryChange.emit($event)"
+            [language]="language">
+        </sqx-table-header>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.lastModifiedByAvatar">
+        <sqx-table-header text="By"></sqx-table-header>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.lastModifiedByName">
+        <sqx-table-header text="Modified By"></sqx-table-header>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.status">
+        <sqx-table-header text="Status"></sqx-table-header>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.statusNext">
+        <sqx-table-header text="Next Status"></sqx-table-header>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.statusColor">
+        <sqx-table-header text="Status"></sqx-table-header>
+    </ng-container>
+    <ng-container *ngSwitchCase="metaFields.version">
+        <sqx-table-header text="Version"></sqx-table-header>
+    </ng-container>
+    <ng-container *ngSwitchDefault>
+        <sqx-table-header [text]="fieldDisplayName"
+            [sortable]="isSortable"
+            [fieldPath]="fieldPath"
+            [query]="query"
+            (queryChange)="queryChange.emit($event)"
+            [language]="language">
+        </sqx-table-header>
+    </ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/list/content-list-header.component.scss b/frontend/app/features/content/shared/list/content-list-header.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/content/shared/list/content-list-header.component.ts b/frontend/app/features/content/shared/list/content-list-header.component.ts
new file mode 100644
index 000000000..89fe2d91e
--- /dev/null
+++ b/frontend/app/features/content/shared/list/content-list-header.component.ts
@@ -0,0 +1,63 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+import {
+    LanguageDto,
+    MetaFields,
+    Query,
+    RootFieldDto,
+    TableField,
+    Types
+} from '@app/shared';
+
+@Component({
+    selector: 'sqx-content-list-header',
+    styleUrls: ['./content-list-header.component.scss'],
+    templateUrl: './content-list-header.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContentListHeaderComponent {
+    @Input()
+    public field: TableField;
+
+    @Output()
+    public queryChange = new EventEmitter<Query>();
+
+    @Input()
+    public query: Query;
+
+    @Input()
+    public language: LanguageDto;
+
+    public get metaFields() {
+        return MetaFields;
+    }
+
+    public get isSortable() {
+        return Types.is(this.field, RootFieldDto) ? this.field.properties.isSortable : false;
+    }
+
+    public get fieldName() {
+        return Types.is(this.field, RootFieldDto) ? this.field.name : this.field;
+    }
+
+    public get fieldDisplayName() {
+        return Types.is(this.field, RootFieldDto) ? this.field.displayName : '';
+    }
+
+    public get fieldPath() {
+        if (Types.isString(this.field)) {
+            return this.field;
+        } else if (this.field.isLocalizable && this.language) {
+            return `data.${this.field.name}.${this.language.iso2Code}`;
+        } else {
+            return `data.${this.field.name}.iv`;
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/list/content-value-editor.component.html b/frontend/app/features/content/shared/list/content-value-editor.component.html
new file mode 100644
index 000000000..b94b4ff30
--- /dev/null
+++ b/frontend/app/features/content/shared/list/content-value-editor.component.html
@@ -0,0 +1,48 @@
+<div [formGroup]="form">
+    <ng-container [ngSwitch]="field.properties.fieldType">
+        <ng-container *ngSwitchCase="'Number'">
+            <ng-container [ngSwitch]="field.rawProperties.editor">
+                <ng-container *ngSwitchCase="'Input'">
+                    <input class="form-control" type="number" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
+                </ng-container>
+                <ng-container *ngSwitchCase="'Stars'">
+                    <sqx-stars [formControlName]="field.name" [maximumStars]="field.rawProperties.maxValue"></sqx-stars>
+                </ng-container>
+                <ng-container *ngSwitchCase="'Dropdown'">
+                    <select class="form-control" [formControlName]="field.name">
+                        <option [ngValue]="null"></option>
+                        <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
+                    </select>
+                </ng-container>
+            </ng-container>
+        </ng-container>
+        <ng-container *ngSwitchCase="'String'">
+            <ng-container [ngSwitch]="field.rawProperties.editor">
+                <ng-container *ngSwitchCase="'Input'">
+                    <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
+                </ng-container>
+                <ng-container *ngSwitchCase="'Slug'">
+                    <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify" />
+                </ng-container>
+                <ng-container *ngSwitchCase="'Dropdown'">
+                    <select class="form-control" [formControlName]="field.name">
+                        <option [ngValue]="null"></option>
+                        <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
+                    </select>
+                </ng-container>
+            </ng-container>
+        </ng-container>
+        <ng-container *ngSwitchCase="'Boolean'">
+            <ng-container [ngSwitch]="field.rawProperties.editor">
+                <ng-container *ngSwitchCase="'Toggle'">
+                    <sqx-toggle [formControlName]="field.name" [threeStates]="!field.properties.isRequired"></sqx-toggle>
+                </ng-container>
+                <ng-container *ngSwitchCase="'Checkbox'">
+                    <ng-container class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" [formControlName]="field.name" sqxIndeterminateValue />
+                    </ng-container>
+                </ng-container>
+            </ng-container>
+        </ng-container>
+    </ng-container>
+</div>
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/list/content-value-editor.component.scss b/frontend/app/features/content/shared/list/content-value-editor.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/content/shared/list/content-value-editor.component.ts b/frontend/app/features/content/shared/list/content-value-editor.component.ts
new file mode 100644
index 000000000..233a58994
--- /dev/null
+++ b/frontend/app/features/content/shared/list/content-value-editor.component.ts
@@ -0,0 +1,25 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { FieldDto } from '@app/shared';
+
+@Component({
+    selector: 'sqx-content-value-editor',
+    styleUrls: ['./content-value-editor.component.scss'],
+    templateUrl: './content-value-editor.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContentValueEditorComponent {
+    @Input()
+    public field: FieldDto;
+
+    @Input()
+    public form: FormGroup;
+}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/list/content-value.component.html b/frontend/app/features/content/shared/list/content-value.component.html
new file mode 100644
index 000000000..7545608ed
--- /dev/null
+++ b/frontend/app/features/content/shared/list/content-value.component.html
@@ -0,0 +1,6 @@
+<ng-container *ngIf="isPlain; else html">
+    <span class="truncate">{{value}}</span>
+</ng-container>
+<ng-template #html>
+    <span class="html-value" [innerHTML]="value.html"></span>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/list/content-value.component.scss b/frontend/app/features/content/shared/list/content-value.component.scss
new file mode 100644
index 000000000..39752b104
--- /dev/null
+++ b/frontend/app/features/content/shared/list/content-value.component.scss
@@ -0,0 +1,14 @@
+:ng-deep {
+    .html-value {
+        img {
+            margin-top: -25px;
+            max-height: 50px;
+            min-height: 50px;
+            position: absolute;
+        }
+    }
+}
+
+.html-value {
+    position: relative;
+}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/list/content-value.component.ts b/frontend/app/features/content/shared/list/content-value.component.ts
new file mode 100644
index 000000000..51d5b18bb
--- /dev/null
+++ b/frontend/app/features/content/shared/list/content-value.component.ts
@@ -0,0 +1,25 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { HtmlValue, Types } from '@app/shared';
+
+@Component({
+    selector: 'sqx-content-value',
+    styleUrls: ['./content-value.component.scss'],
+    templateUrl: './content-value.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContentValueComponent {
+    @Input()
+    public value: any;
+
+    public get isPlain() {
+        return !Types.is(this.value, HtmlValue);
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/content.component.html b/frontend/app/features/content/shared/list/content.component.html
similarity index 88%
rename from frontend/app/features/content/shared/content.component.html
rename to frontend/app/features/content/shared/list/content.component.html
index a60669440..cc3604ca9 100644
--- a/frontend/app/features/content/shared/content.component.html
+++ b/frontend/app/features/content/shared/list/content.component.html
@@ -2,7 +2,7 @@
     <td class="cell-select inline-edit" sqxStopClick>
         <input type="checkbox" class="form-check"
             [ngModel]="selected" 
-            (ngModelChange)="emitSelectedChange($event)" />
+            (ngModelChange)="selectedChange.emit($event)" />
 
         <ng-container *ngIf="isDirty">
             <div class="edit-menu">
@@ -25,7 +25,7 @@
     
             <ng-container *sqxModal="dropdown;closeAlways:true">
                 <div class="dropdown-menu" [sqxAnchoredTo]="buttonOptions" position="bottom-left" @fade>
-                    <a class="dropdown-item" *ngFor="let info of content.statusUpdates" (click)="emitChangeStatus(info.status)">
+                    <a class="dropdown-item" *ngFor="let info of content.statusUpdates" (click)="statusChange.emit(info.status)">
                         Change to 
 
                         <sqx-content-status
@@ -35,14 +35,14 @@
                             small="true">
                         </sqx-content-status>
                     </a>
-                    <a class="dropdown-item" (click)="emitClone(); dropdown.hide()" *ngIf="canClone">
+                    <a class="dropdown-item" (click)="clone.emit(); dropdown.hide()" *ngIf="canClone">
                         Clone
                     </a>
                     
                     <div class="dropdown-divider"></div>
         
                     <a class="dropdown-item dropdown-item-delete"
-                        (sqxConfirmClick)="emitDelete()"
+                        (sqxConfirmClick)="delete.emit()"
                         confirmTitle="Delete content" 
                         confirmText="Do you really want to delete the content?">
                         Delete
diff --git a/frontend/app/features/content/shared/content.component.scss b/frontend/app/features/content/shared/list/content.component.scss
similarity index 89%
rename from frontend/app/features/content/shared/content.component.scss
rename to frontend/app/features/content/shared/list/content.component.scss
index 8f71e59ca..40769d5f2 100644
--- a/frontend/app/features/content/shared/content.component.scss
+++ b/frontend/app/features/content/shared/list/content.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .inline-edit {
     & {
         position: relative;
diff --git a/frontend/app/features/content/shared/content.component.ts b/frontend/app/features/content/shared/list/content.component.ts
similarity index 90%
rename from frontend/app/features/content/shared/content.component.ts
rename to frontend/app/features/content/shared/list/content.component.ts
index 47110ebb2..4a5a85b4e 100644
--- a/frontend/app/features/content/shared/content.component.ts
+++ b/frontend/app/features/content/shared/list/content.component.ts
@@ -125,20 +125,4 @@ export class ContentComponent implements OnChanges {
 
         this.fields.forEach(x => x.reset());
     }
-
-    public emitSelectedChange(isSelected: boolean) {
-        this.selectedChange.emit(isSelected);
-    }
-
-    public emitDelete() {
-        this.delete.emit();
-    }
-
-    public emitChangeStatus(status: string) {
-        this.statusChange.emit(status);
-    }
-
-    public emitClone() {
-        this.clone.emit();
-    }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/preview-button.component.scss b/frontend/app/features/content/shared/preview-button.component.scss
index fbb752506..e69de29bb 100644
--- a/frontend/app/features/content/shared/preview-button.component.scss
+++ b/frontend/app/features/content/shared/preview-button.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/reference-item.component.ts b/frontend/app/features/content/shared/reference-item.component.ts
deleted file mode 100644
index a8777c67e..000000000
--- a/frontend/app/features/content/shared/reference-item.component.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-
-import {
-    AppLanguageDto,
-    ContentDto,
-    getContentValue
-} from '@app/shared';
-
-/* tslint:disable:component-selector */
-
-@Component({
-    selector: '[sqxReferenceItem]',
-    styleUrls: ['./reference-item.component.scss'],
-    template: `
-        <tr>
-            <td class="cell-select">
-                <ng-content></ng-content>
-            </td>
-
-            <td sqxContentListCell="meta.lastModifiedBy.avatar">
-                <sqx-content-list-field field="meta.lastModifiedBy.avatar" [content]="content" [language]="language"></sqx-content-list-field>
-            </td>
-
-            <td class="cell-auto cell-content" *ngFor="let value of values">
-                <sqx-content-value [value]="value"></sqx-content-value>
-            </td>
-
-            <td class="cell-label" *ngIf="!isCompact">
-                <span class="badge badge-pill truncate-inline badge-primary">{{content.schemaDisplayName}}</span>
-            </td>
-
-            <td class="cell-actions">
-                <div class="reference-edit">
-                    <button type="button" class="btn btn-text-secondary">
-                        <i class="icon-dots"></i>
-                    </button>
-
-                    <div class="reference-menu">
-                        <a class="btn btn-text-secondary" [routerLink]="['../..', content.schemaName, content.id]">
-                            <i class="icon-pencil"></i>
-                        </a>
-
-                        <button type="button" class="btn btn-text-secondary" (click)="emitDelete()">
-                            <i class="icon-close"></i>
-                        </button>
-                    </div>
-                </div>
-            </td>
-        </tr>
-        <tr class="spacer"></tr>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ReferenceItemComponent implements OnChanges {
-    @Output()
-    public delete = new EventEmitter();
-
-    @Input()
-    public language: AppLanguageDto;
-
-    @Input()
-    public isCompact = false;
-
-    @Input()
-    public columnCount = 0;
-
-    @Input('sqxReferenceItem')
-    public content: ContentDto;
-
-    public values: ReadonlyArray<any> = [];
-
-    public ngOnChanges(changes: SimpleChanges) {
-        this.updateValues();
-    }
-
-    public emitDelete() {
-        this.delete.emit();
-    }
-
-    private updateValues() {
-        const values = [];
-
-        for (let i = 0; i < this.columnCount; i++) {
-            const field = this.content.referenceFields[i];
-
-            if (field) {
-                const { formatted } = getContentValue(this.content, this.language, field);
-
-                values.push(formatted);
-            } else {
-                values.push('');
-            }
-        }
-
-        this.values = values;
-    }
-}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/references/content-selector-item.component.html b/frontend/app/features/content/shared/references/content-selector-item.component.html
new file mode 100644
index 000000000..6ae743121
--- /dev/null
+++ b/frontend/app/features/content/shared/references/content-selector-item.component.html
@@ -0,0 +1,18 @@
+<tr (click)="toggle()">
+    <td class="cell-select" sqxStopClick>
+        <input type="checkbox" class="form-check"
+            [disabled]="!selectable"
+            [ngModel]="selected || !selectable"
+            (ngModelChange)="select($event)"
+        />
+    </td>
+
+    <td sqxContentListCell="meta.lastModifiedBy.avatar">
+        <sqx-content-list-field field="meta.lastModifiedBy.avatar" [content]="content" [language]="language"></sqx-content-list-field>
+    </td>
+
+    <td *ngFor="let field of schema.defaultReferenceFields" [sqxContentListCell]="field">
+        <sqx-content-list-field [field]="field" [content]="content" [language]="language"></sqx-content-list-field>
+    </td>
+</tr>
+<tr class="spacer"></tr>
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/references/content-selector-item.component.scss b/frontend/app/features/content/shared/references/content-selector-item.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/content/shared/references/content-selector-item.component.ts b/frontend/app/features/content/shared/references/content-selector-item.component.ts
new file mode 100644
index 000000000..09e39730b
--- /dev/null
+++ b/frontend/app/features/content/shared/references/content-selector-item.component.ts
@@ -0,0 +1,52 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+/* tslint:disable:component-selector */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+import {
+    ContentDto,
+    LanguageDto,
+    SchemaDetailsDto
+} from '@app/shared';
+
+@Component({
+    selector: '[sqxContentSelectorItem]',
+    styleUrls: ['./content-selector-item.component.scss'],
+    templateUrl: './content-selector-item.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContentSelectorItemComponent {
+    @Output()
+    public selectedChange = new EventEmitter<boolean>();
+
+    @Input()
+    public selected = false;
+
+    @Input()
+    public selectable = true;
+
+    @Input()
+    public language: LanguageDto;
+
+    @Input()
+    public schema: SchemaDetailsDto;
+
+    @Input('sqxContentSelectorItem')
+    public content: ContentDto;
+
+    public toggle() {
+        if (this.selectable) {
+            this.select(!this.selected);
+        }
+    }
+
+    public select(isSelected: boolean) {
+        this.selectedChange.emit(isSelected);
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/contents-selector.component.html b/frontend/app/features/content/shared/references/content-selector.component.html
similarity index 97%
rename from frontend/app/features/content/shared/contents-selector.component.html
rename to frontend/app/features/content/shared/references/content-selector.component.html
index 9cdd4b632..ed50dd9f8 100644
--- a/frontend/app/features/content/shared/contents-selector.component.html
+++ b/frontend/app/features/content/shared/references/content-selector.component.html
@@ -1,4 +1,4 @@
-<sqx-modal-dialog (close)="emitComplete()" large="true" fullHeight="true" grid="true" flexBody="true">
+<sqx-modal-dialog (close)="emitComplete()" size="lg"  fullHeight="true" grid="true" flexBody="true">
     <ng-container title>
         <div class="row">
             <div class="col-selector">
diff --git a/frontend/app/features/content/shared/contents-selector.component.scss b/frontend/app/features/content/shared/references/content-selector.component.scss
similarity index 92%
rename from frontend/app/features/content/shared/contents-selector.component.scss
rename to frontend/app/features/content/shared/references/content-selector.component.scss
index 45537634d..2edb65f57 100644
--- a/frontend/app/features/content/shared/contents-selector.component.scss
+++ b/frontend/app/features/content/shared/references/content-selector.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host ::ng-deep {
     .modal-body {
         background: $color-background;
diff --git a/frontend/app/features/content/shared/contents-selector.component.ts b/frontend/app/features/content/shared/references/content-selector.component.ts
similarity index 94%
rename from frontend/app/features/content/shared/contents-selector.component.ts
rename to frontend/app/features/content/shared/references/content-selector.component.ts
index ded8b7080..5ef7557f9 100644
--- a/frontend/app/features/content/shared/contents-selector.component.ts
+++ b/frontend/app/features/content/shared/references/content-selector.component.ts
@@ -24,14 +24,14 @@ import {
 } from '@app/shared';
 
 @Component({
-    selector: 'sqx-contents-selector',
-    styleUrls: ['./contents-selector.component.scss'],
-    templateUrl: './contents-selector.component.html',
+    selector: 'sqx-content-selector',
+    styleUrls: ['./content-selector.component.scss'],
+    templateUrl: './content-selector.component.html',
     providers: [
         ManualContentsState
     ]
 })
-export class ContentsSelectorComponent extends ResourceOwner implements OnInit {
+export class ContentSelectorComponent extends ResourceOwner implements OnInit {
     @Output()
     public select = new EventEmitter<ReadonlyArray<ContentDto>>();
 
diff --git a/frontend/app/features/content/shared/references/reference-item.component.html b/frontend/app/features/content/shared/references/reference-item.component.html
new file mode 100644
index 000000000..845e47abe
--- /dev/null
+++ b/frontend/app/features/content/shared/references/reference-item.component.html
@@ -0,0 +1,36 @@
+<tr>
+    <td class="cell-select">
+        <ng-content></ng-content>
+    </td>
+
+    <td sqxContentListCell="meta.lastModifiedBy.avatar">
+        <sqx-content-list-field field="meta.lastModifiedBy.avatar" [content]="content" [language]="language"></sqx-content-list-field>
+    </td>
+
+    <td class="cell-auto cell-content" *ngFor="let value of values">
+        <sqx-content-value [value]="value"></sqx-content-value>
+    </td>
+
+    <td class="cell-label" *ngIf="!isCompact">
+        <span class="badge badge-pill truncate-inline badge-primary">{{content.schemaDisplayName}}</span>
+    </td>
+
+    <td class="cell-actions">
+        <div class="reference-edit">
+            <button type="button" class="btn btn-text-secondary">
+                <i class="icon-dots"></i>
+            </button>
+
+            <div class="reference-menu">
+                <a class="btn btn-text-secondary" [routerLink]="['../..', content.schemaName, content.id]">
+                    <i class="icon-pencil"></i>
+                </a>
+
+                <button type="button" class="btn btn-text-secondary" (click)="delete.emit()">
+                    <i class="icon-close"></i>
+                </button>
+            </div>
+        </div>
+    </td>
+</tr>
+<tr class="spacer"></tr>
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/reference-item.component.scss b/frontend/app/features/content/shared/references/reference-item.component.scss
similarity index 90%
rename from frontend/app/features/content/shared/reference-item.component.scss
rename to frontend/app/features/content/shared/references/reference-item.component.scss
index c61e3cdfa..d9558656c 100644
--- a/frontend/app/features/content/shared/reference-item.component.scss
+++ b/frontend/app/features/content/shared/references/reference-item.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .reference-edit {
     & {
         @include hover-visible('.reference-menu');
diff --git a/frontend/app/features/content/shared/references/reference-item.component.ts b/frontend/app/features/content/shared/references/reference-item.component.ts
new file mode 100644
index 000000000..031ddc7e2
--- /dev/null
+++ b/frontend/app/features/content/shared/references/reference-item.component.ts
@@ -0,0 +1,63 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+/* tslint:disable:component-selector */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+
+import {
+    AppLanguageDto,
+    ContentDto,
+    getContentValue
+} from '@app/shared';
+
+@Component({
+    selector: '[sqxReferenceItem]',
+    styleUrls: ['./reference-item.component.scss'],
+    templateUrl: './reference-item.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ReferenceItemComponent implements OnChanges {
+    @Output()
+    public delete = new EventEmitter();
+
+    @Input()
+    public language: AppLanguageDto;
+
+    @Input()
+    public isCompact = false;
+
+    @Input()
+    public columnCount = 0;
+
+    @Input('sqxReferenceItem')
+    public content: ContentDto;
+
+    public values: ReadonlyArray<any> = [];
+
+    public ngOnChanges(changes: SimpleChanges) {
+        this.updateValues();
+    }
+
+    private updateValues() {
+        const values = [];
+
+        for (let i = 0; i < this.columnCount; i++) {
+            const field = this.content.referenceFields[i];
+
+            if (field) {
+                const { formatted } = getContentValue(this.content, this.language, field);
+
+                values.push(formatted);
+            } else {
+                values.push('');
+            }
+        }
+
+        this.values = values;
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/references-editor.component.html b/frontend/app/features/content/shared/references/references-editor.component.html
similarity index 95%
rename from frontend/app/features/content/shared/references-editor.component.html
rename to frontend/app/features/content/shared/references/references-editor.component.html
index f915f8311..4c4c371f4 100644
--- a/frontend/app/features/content/shared/references-editor.component.html
+++ b/frontend/app/features/content/shared/references/references-editor.component.html
@@ -27,12 +27,12 @@
 </div>
 
 <ng-container *sqxModal="selectorDialog">
-    <sqx-contents-selector 
+    <sqx-content-selector 
         [allowDuplicates]="allowDuplicates"
         [alreadySelected]="snapshot.contentItems"
         [language]="language"
         [languages]="languages"
         [schemaIds]="schemaIds"
         (select)="select($event)">
-    </sqx-contents-selector>
+    </sqx-content-selector>
 </ng-container>
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/references-editor.component.scss b/frontend/app/features/content/shared/references/references-editor.component.scss
similarity index 95%
rename from frontend/app/features/content/shared/references-editor.component.scss
rename to frontend/app/features/content/shared/references/references-editor.component.scss
index 91fbf4c99..3b3f653ef 100644
--- a/frontend/app/features/content/shared/references-editor.component.scss
+++ b/frontend/app/features/content/shared/references/references-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .disabled {
     pointer-events: none;
 }
diff --git a/frontend/app/features/content/shared/references-editor.component.ts b/frontend/app/features/content/shared/references/references-editor.component.ts
similarity index 94%
rename from frontend/app/features/content/shared/references-editor.component.ts
rename to frontend/app/features/content/shared/references/references-editor.component.ts
index 9c4751d28..fec9b8989 100644
--- a/frontend/app/features/content/shared/references-editor.component.ts
+++ b/frontend/app/features/content/shared/references/references-editor.component.ts
@@ -34,11 +34,12 @@ interface State {
     selector: 'sqx-references-editor',
     styleUrls: ['./references-editor.component.scss'],
     templateUrl: './references-editor.component.html',
-    providers: [SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-// tslint:disable-next-line: readonly-array
-export class ReferencesEditorComponent extends StatefulControlComponent<State, string[]> {
+export class ReferencesEditorComponent extends StatefulControlComponent<State, ReadonlyArray<string>> {
     @Input()
     public schemaIds: ReadonlyArray<string>;
 
@@ -68,7 +69,7 @@ export class ReferencesEditorComponent extends StatefulControlComponent<State, s
 
     public writeValue(obj: any) {
         if (Types.isArrayOfString(obj)) {
-            if (!Types.isEquals(obj, this.snapshot.contentItems.map(x => x.id))) {
+            if (!Types.equals(obj, this.snapshot.contentItems.map(x => x.id))) {
                 const contentIds: string[] = obj;
 
                 this.contentsService.getContentsByIds(this.appsState.appName, contentIds)
diff --git a/frontend/app/features/dashboard/pages/dashboard-page.component.scss b/frontend/app/features/dashboard/pages/dashboard-page.component.scss
index 487878184..2468c97cc 100644
--- a/frontend/app/features/dashboard/pages/dashboard-page.component.scss
+++ b/frontend/app/features/dashboard/pages/dashboard-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .dashboard {
     & {
         @include absolute(0, 0, 0, 0);
diff --git a/frontend/app/features/rules/pages/events/rule-events-page.component.scss b/frontend/app/features/rules/pages/events/rule-events-page.component.scss
index 9714b2f2b..678a2764c 100644
--- a/frontend/app/features/rules/pages/events/rule-events-page.component.scss
+++ b/frontend/app/features/rules/pages/events/rule-events-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 h3 {
     margin-bottom: 1rem;
 }
diff --git a/frontend/app/features/rules/pages/rules/actions/generic-action.component.scss b/frontend/app/features/rules/pages/rules/actions/generic-action.component.scss
index 91941c2fc..57ca22613 100644
--- a/frontend/app/features/rules/pages/rules/actions/generic-action.component.scss
+++ b/frontend/app/features/rules/pages/rules/actions/generic-action.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .form-check {
     margin-bottom: -.25rem;
 }
diff --git a/frontend/app/features/rules/pages/rules/rule-element.component.scss b/frontend/app/features/rules/pages/rules/rule-element.component.scss
index 7fcbd6318..06fd8cbaa 100644
--- a/frontend/app/features/rules/pages/rules/rule-element.component.scss
+++ b/frontend/app/features/rules/pages/rules/rule-element.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .small {
     & {
         height: 3rem;
diff --git a/frontend/app/features/rules/pages/rules/rule-icon.component.html b/frontend/app/features/rules/pages/rules/rule-icon.component.html
new file mode 100644
index 000000000..b74ae71d5
--- /dev/null
+++ b/frontend/app/features/rules/pages/rules/rule-icon.component.html
@@ -0,0 +1,7 @@
+<span class="icon {{size}}">
+    <i *ngIf="element.iconCode; else svgIcon" class="icon icon-{{element.iconCode}}"></i>
+
+    <ng-template #svgIcon>
+        <i class="svg-icon" [innerHtml]="element.iconImage | sqxSafeHtml"></i>
+    </ng-template>
+</span>
\ No newline at end of file
diff --git a/frontend/app/features/rules/pages/rules/rule-icon.component.scss b/frontend/app/features/rules/pages/rules/rule-icon.component.scss
new file mode 100644
index 000000000..dc7d034a4
--- /dev/null
+++ b/frontend/app/features/rules/pages/rules/rule-icon.component.scss
@@ -0,0 +1,45 @@
+:ng-deep {
+    svg {
+        display: block;
+
+        fill: $color-dark-foreground;
+    }
+}
+
+.svg-icon {
+    display: inline-block;
+}
+
+.icon {
+    color: $color-dark-foreground;
+}
+
+.sm {
+    .icon {
+        font-size: 14px;
+    }
+
+    .svg-icon {
+        width: 14px;
+    }
+}
+
+.md {
+    .icon {
+        font-size: 20px;
+    }
+
+    .svg-icon {
+        width: 20px;
+    }
+}
+
+.lg {
+    .icon {
+        font-size: 30px;
+    }
+
+    .svg-icon {
+        width: 30px;
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/features/rules/pages/rules/rule-icon.component.ts b/frontend/app/features/rules/pages/rules/rule-icon.component.ts
index 219c3cd11..ae5a09374 100644
--- a/frontend/app/features/rules/pages/rules/rule-icon.component.ts
+++ b/frontend/app/features/rules/pages/rules/rule-icon.component.ts
@@ -13,53 +13,8 @@ import { RuleElementDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-rule-icon',
-    template: `
-        <span class="icon {{size}}">
-            <i *ngIf="element.iconCode; else svgIcon" class="icon icon-{{element.iconCode}}"></i>
-
-            <ng-template #svgIcon>
-                <i class="svg-icon" [innerHtml]="element.iconImage | sqxSafeHtml"></i>
-            </ng-template>
-        </span>
-    `,
-    styles: [`
-        .svg-icon {
-            display: inline-block;
-        }
-
-        .icon {
-            color: white;
-        }
-
-        .sm .icon {
-            font-size: 14px;
-        }
-
-        .sm .svg-icon {
-            width: 14px;
-        }
-
-        .md .icon {
-            font-size: 20px;
-        }
-
-        .md .svg-icon {
-            width: 20px;
-        }
-
-        .lg .icon {
-            font-size: 30px;
-        }
-
-        .lg .svg-icon {
-            width: 30px;
-        }
-
-        ::ng-deep svg {
-            fill: white;
-            display: block;
-        }`
-    ],
+    styleUrls: ['./rule-icon.component.scss'],
+    templateUrl: './rule-icon.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RuleIconComponent {
diff --git a/frontend/app/features/rules/pages/rules/rule-wizard.component.html b/frontend/app/features/rules/pages/rules/rule-wizard.component.html
index 82b9927fe..ba85abafd 100644
--- a/frontend/app/features/rules/pages/rules/rule-wizard.component.html
+++ b/frontend/app/features/rules/pages/rules/rule-wizard.component.html
@@ -1,4 +1,4 @@
-<sqx-modal-dialog large="true" fullHeight="true" (close)="emitComplete()" [showFooter]="step === 2 || step === 4">
+<sqx-modal-dialog size="lg" fullHeight="true" (close)="emitComplete()" [showFooter]="step === 2 || step === 4">
     <ng-container title>
         <ng-container *ngIf="mode === 'EditTrigger'">
             Edit Trigger
diff --git a/frontend/app/features/rules/pages/rules/rule-wizard.component.scss b/frontend/app/features/rules/pages/rules/rule-wizard.component.scss
index a1105fa9d..f413e0562 100644
--- a/frontend/app/features/rules/pages/rules/rule-wizard.component.scss
+++ b/frontend/app/features/rules/pages/rules/rule-wizard.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .rule-element {
     margin: .25rem;
 }
diff --git a/frontend/app/features/rules/pages/rules/rule.component.scss b/frontend/app/features/rules/pages/rules/rule.component.scss
index 65ee99bc7..1f4dbccc6 100644
--- a/frontend/app/features/rules/pages/rules/rule.component.scss
+++ b/frontend/app/features/rules/pages/rules/rule.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .card {
     & {
         border-bottom-width: 2px;
diff --git a/frontend/app/features/rules/pages/rules/rules-page.component.scss b/frontend/app/features/rules/pages/rules/rules-page.component.scss
index 7d868467c..90b884b26 100644
--- a/frontend/app/features/rules/pages/rules/rules-page.component.scss
+++ b/frontend/app/features/rules/pages/rules/rules-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .rule-element {
     display: block;
 }
diff --git a/frontend/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.scss b/frontend/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.scss
index 6e1eef5ec..48b93f24f 100644
--- a/frontend/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.scss
+++ b/frontend/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 textarea {
     height: 100px;
 }
\ No newline at end of file
diff --git a/frontend/app/features/rules/pages/rules/triggers/comment-trigger.component.scss b/frontend/app/features/rules/pages/rules/triggers/comment-trigger.component.scss
index 6e1eef5ec..48b93f24f 100644
--- a/frontend/app/features/rules/pages/rules/triggers/comment-trigger.component.scss
+++ b/frontend/app/features/rules/pages/rules/triggers/comment-trigger.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 textarea {
     height: 100px;
 }
\ No newline at end of file
diff --git a/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss b/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss
index 858cd09ff..dad1080bf 100644
--- a/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss
+++ b/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .section {
     border-top: 1px solid $color-border;
     padding-bottom: 1rem;
diff --git a/frontend/app/features/rules/pages/rules/triggers/schema-changed-trigger.component.scss b/frontend/app/features/rules/pages/rules/triggers/schema-changed-trigger.component.scss
index 6e1eef5ec..48b93f24f 100644
--- a/frontend/app/features/rules/pages/rules/triggers/schema-changed-trigger.component.scss
+++ b/frontend/app/features/rules/pages/rules/triggers/schema-changed-trigger.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 textarea {
     height: 100px;
 }
\ No newline at end of file
diff --git a/frontend/app/features/rules/pages/rules/triggers/usage-trigger.component.scss b/frontend/app/features/rules/pages/rules/triggers/usage-trigger.component.scss
index 6e1eef5ec..48b93f24f 100644
--- a/frontend/app/features/rules/pages/rules/triggers/usage-trigger.component.scss
+++ b/frontend/app/features/rules/pages/rules/triggers/usage-trigger.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 textarea {
     height: 100px;
 }
\ No newline at end of file
diff --git a/frontend/app/features/schemas/declarations.ts b/frontend/app/features/schemas/declarations.ts
index 084450674..808e22af9 100644
--- a/frontend/app/features/schemas/declarations.ts
+++ b/frontend/app/features/schemas/declarations.ts
@@ -5,41 +5,45 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-export * from './pages/schema/types/array-validation.component';
-export * from './pages/schema/types/assets-ui.component';
-export * from './pages/schema/types/assets-validation.component';
-export * from './pages/schema/types/boolean-ui.component';
-export * from './pages/schema/types/boolean-validation.component';
-export * from './pages/schema/types/date-time-ui.component';
-export * from './pages/schema/types/date-time-validation.component';
-export * from './pages/schema/types/geolocation-ui.component';
-export * from './pages/schema/types/geolocation-validation.component';
-export * from './pages/schema/types/json-ui.component';
-export * from './pages/schema/types/json-validation.component';
-export * from './pages/schema/types/number-ui.component';
-export * from './pages/schema/types/number-validation.component';
-export * from './pages/schema/types/references-ui.component';
-export * from './pages/schema/types/references-validation.component';
-export * from './pages/schema/types/string-ui.component';
-export * from './pages/schema/types/string-validation.component';
-export * from './pages/schema/types/tags-ui.component';
-export * from './pages/schema/types/tags-validation.component';
-
-export * from './pages/schema/forms/field-form-common.component';
-export * from './pages/schema/forms/field-form-ui.component';
-export * from './pages/schema/forms/field-form-validation.component';
-export * from './pages/schema/forms/field-form.component';
-
-export * from './pages/schema/field-list.component';
-export * from './pages/schema/field-wizard.component';
-export * from './pages/schema/field.component';
-export * from './pages/schema/schema-edit-form.component';
-export * from './pages/schema/schema-export-form.component';
-export * from './pages/schema/schema-fields.component';
 export * from './pages/schema/schema-page.component';
-export * from './pages/schema/schema-preview-urls-form.component';
-export * from './pages/schema/schema-scripts-form.component';
-export * from './pages/schema/schema-ui-form.component';
+
+export * from './pages/schema/common/schema-edit-form.component';
+
+export * from './pages/schema/export/schema-export-form.component';
+
+export * from './pages/schema/fields/field-wizard.component';
+export * from './pages/schema/fields/field.component';
+export * from './pages/schema/fields/forms/field-form-common.component';
+export * from './pages/schema/fields/forms/field-form-ui.component';
+export * from './pages/schema/fields/forms/field-form-validation.component';
+export * from './pages/schema/fields/forms/field-form.component';
+export * from './pages/schema/fields/schema-fields.component';
+export * from './pages/schema/fields/types/array-validation.component';
+export * from './pages/schema/fields/types/assets-ui.component';
+export * from './pages/schema/fields/types/assets-validation.component';
+export * from './pages/schema/fields/types/boolean-ui.component';
+export * from './pages/schema/fields/types/boolean-validation.component';
+export * from './pages/schema/fields/types/date-time-ui.component';
+export * from './pages/schema/fields/types/date-time-validation.component';
+export * from './pages/schema/fields/types/geolocation-ui.component';
+export * from './pages/schema/fields/types/geolocation-validation.component';
+export * from './pages/schema/fields/types/json-ui.component';
+export * from './pages/schema/fields/types/json-validation.component';
+export * from './pages/schema/fields/types/number-ui.component';
+export * from './pages/schema/fields/types/number-validation.component';
+export * from './pages/schema/fields/types/references-ui.component';
+export * from './pages/schema/fields/types/references-validation.component';
+export * from './pages/schema/fields/types/string-ui.component';
+export * from './pages/schema/fields/types/string-validation.component';
+export * from './pages/schema/fields/types/tags-ui.component';
+export * from './pages/schema/fields/types/tags-validation.component';
+
+export * from './pages/schema/preview/schema-preview-urls-form.component';
+
+export * from './pages/schema/scripts/schema-scripts-form.component';
+
+export * from './pages/schema/ui/field-list.component';
+export * from './pages/schema/ui/schema-ui-form.component';
 
 export * from './pages/schemas/schema-form.component';
 export * from './pages/schemas/schemas-page.component';
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/schema-edit-form.component.html b/frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-edit-form.component.html
rename to frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.html
diff --git a/frontend/app/features/schemas/pages/schema/schema-edit-form.component.scss b/frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.scss
similarity index 68%
rename from frontend/app/features/schemas/pages/schema/schema-edit-form.component.scss
rename to frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.scss
index 71c028eac..7695fcc0b 100644
--- a/frontend/app/features/schemas/pages/schema/schema-edit-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .card-header,
 .card-footer {
     padding: 1.25rem;
diff --git a/frontend/app/features/schemas/pages/schema/schema-edit-form.component.ts b/frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-edit-form.component.ts
rename to frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/schema-export-form.component.html b/frontend/app/features/schemas/pages/schema/export/schema-export-form.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-export-form.component.html
rename to frontend/app/features/schemas/pages/schema/export/schema-export-form.component.html
diff --git a/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss b/frontend/app/features/schemas/pages/schema/export/schema-export-form.component.scss
similarity index 90%
rename from frontend/app/features/schemas/pages/schema/schema-export-form.component.scss
rename to frontend/app/features/schemas/pages/schema/export/schema-export-form.component.scss
index 9f8d22053..58001f79a 100644
--- a/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/export/schema-export-form.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host,
 .inner-form,
 .inner-main {
diff --git a/frontend/app/features/schemas/pages/schema/schema-export-form.component.ts b/frontend/app/features/schemas/pages/schema/export/schema-export-form.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-export-form.component.ts
rename to frontend/app/features/schemas/pages/schema/export/schema-export-form.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/field-wizard.component.html b/frontend/app/features/schemas/pages/schema/fields/field-wizard.component.html
similarity index 98%
rename from frontend/app/features/schemas/pages/schema/field-wizard.component.html
rename to frontend/app/features/schemas/pages/schema/fields/field-wizard.component.html
index e2dd34cb5..a03858490 100644
--- a/frontend/app/features/schemas/pages/schema/field-wizard.component.html
+++ b/frontend/app/features/schemas/pages/schema/fields/field-wizard.component.html
@@ -1,4 +1,4 @@
-<sqx-modal-dialog (close)="emitComplete()" large="true">
+<sqx-modal-dialog (close)="emitComplete()" size="lg">
     <ng-container title>
         <ng-container *ngIf="parent; else noParent">
             Add Nested Field
diff --git a/frontend/app/features/schemas/pages/schema/field-wizard.component.scss b/frontend/app/features/schemas/pages/schema/fields/field-wizard.component.scss
similarity index 85%
rename from frontend/app/features/schemas/pages/schema/field-wizard.component.scss
rename to frontend/app/features/schemas/pages/schema/fields/field-wizard.component.scss
index c8c7df16c..3a991b7d4 100644
--- a/frontend/app/features/schemas/pages/schema/field-wizard.component.scss
+++ b/frontend/app/features/schemas/pages/schema/fields/field-wizard.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 $icon-size: 4.5rem;
 
 :host ::ng-deep {
diff --git a/frontend/app/features/schemas/pages/schema/field-wizard.component.ts b/frontend/app/features/schemas/pages/schema/fields/field-wizard.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/field-wizard.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/field-wizard.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/field.component.html b/frontend/app/features/schemas/pages/schema/fields/field.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/field.component.html
rename to frontend/app/features/schemas/pages/schema/fields/field.component.html
diff --git a/frontend/app/features/schemas/pages/schema/field.component.scss b/frontend/app/features/schemas/pages/schema/fields/field.component.scss
similarity index 97%
rename from frontend/app/features/schemas/pages/schema/field.component.scss
rename to frontend/app/features/schemas/pages/schema/fields/field.component.scss
index 0dad76061..f97ee0cc8 100644
--- a/frontend/app/features/schemas/pages/schema/field.component.scss
+++ b/frontend/app/features/schemas/pages/schema/fields/field.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 $field-header: #e7ebef;
 $field-line: #c7cfd7;
 
diff --git a/frontend/app/features/schemas/pages/schema/field.component.ts b/frontend/app/features/schemas/pages/schema/fields/field.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/field.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/field.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form-common.component.html b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-common.component.html
new file mode 100644
index 000000000..b6114b6d9
--- /dev/null
+++ b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-common.component.html
@@ -0,0 +1,53 @@
+<div [formGroup]="editForm">
+    <div class="form-group row">
+        <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldName">Name</label>
+
+        <div class="col-7">
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldName" readonly [ngModel]="field.name" [ngModelOptions]="standalone" />
+
+            <sqx-form-hint>
+                The name of the field in the API response.
+            </sqx-form-hint>
+        </div>
+    </div>
+
+    <div class="form-group row">
+        <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldLabel">Label</label>
+
+        <div class="col-7">
+            <sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors>
+
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldLabel" maxlength="100" formControlName="label" />
+
+            <sqx-form-hint>
+                Display name for documentation and user interfaces.
+            </sqx-form-hint>
+        </div>
+    </div>
+
+    <div class="form-group row">
+        <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldHints">Hints</label>
+
+        <div class="col-7">
+            <sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors>
+
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldHints" maxlength="100" formControlName="hints" />
+
+            <sqx-form-hint>
+                Describe this field for documentation and user interfaces.
+            </sqx-form-hint>
+        </div>
+    </div>
+
+    <div class="form-group row" *ngIf="field.properties.isContentField">
+         <label class="col-3 col-form-label">Tags</label>
+
+        <div class="col-7">
+            <sqx-tag-editor id="schemaTags" formControlName="tags"></sqx-tag-editor>
+
+            <sqx-form-hint>
+                Tags to annotate your field for automation processes.
+            </sqx-form-hint>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form-common.component.scss b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-common.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form-common.component.ts b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-common.component.ts
new file mode 100644
index 000000000..dbf44ac44
--- /dev/null
+++ b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-common.component.ts
@@ -0,0 +1,29 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { FieldDto } from '@app/shared';
+
+@Component({
+    selector: 'sqx-field-form-common',
+    styleUrls: ['./field-form-common.component.scss'],
+    templateUrl: './field-form-common.component.html'
+})
+export class FieldFormCommonComponent {
+    public readonly standalone = { standalone: true };
+
+    @Input()
+    public editForm: FormGroup;
+
+    @Input()
+    public editFormSubmitted = false;
+
+    @Input()
+    public field: FieldDto;
+}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.html
new file mode 100644
index 000000000..bef156f55
--- /dev/null
+++ b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.html
@@ -0,0 +1,29 @@
+<ng-container [ngSwitch]="field.rawProperties.fieldType">
+    <ng-container *ngSwitchCase="'Assets'">
+        <sqx-assets-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-assets-ui>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Boolean'">
+        <sqx-boolean-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-boolean-ui>
+    </ng-container>
+    <ng-container *ngSwitchCase="'DateTime'">
+        <sqx-date-time-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-date-time-ui>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Geolocation'">
+        <sqx-geolocation-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-geolocation-ui>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Json'">
+        <sqx-json-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-json-ui>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Number'">
+        <sqx-number-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-number-ui>
+    </ng-container>
+    <ng-container *ngSwitchCase="'References'">
+        <sqx-references-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-references-ui>
+    </ng-container>
+    <ng-container *ngSwitchCase="'String'">
+        <sqx-string-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-string-ui>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Tags'">
+        <sqx-tags-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-tags-ui>
+    </ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.scss b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.ts b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.ts
new file mode 100644
index 000000000..e5134c0bf
--- /dev/null
+++ b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.ts
@@ -0,0 +1,24 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { FieldDto } from '@app/shared';
+
+@Component({
+    selector: 'sqx-field-form-ui',
+    styleUrls: ['./field-form-ui.component.scss'],
+    templateUrl: './field-form-ui.component.html'
+})
+export class FieldFormUIComponent {
+    @Input()
+    public editForm: FormGroup;
+
+    @Input()
+    public field: FieldDto;
+}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.html
new file mode 100644
index 000000000..4a7b0f9dc
--- /dev/null
+++ b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.html
@@ -0,0 +1,32 @@
+<ng-container [ngSwitch]="field.rawProperties.fieldType">
+    <ng-container *ngSwitchCase="'Array'">
+        <sqx-array-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-array-validation>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Assets'">
+        <sqx-assets-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-assets-validation>
+    </ng-container>
+    <ng-container *ngSwitchCase="'DateTime'">
+        <sqx-date-time-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-date-time-validation>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Boolean'">
+        <sqx-boolean-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-boolean-validation>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Geolocation'">
+        <sqx-geolocation-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-geolocation-validation>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Json'">
+        <sqx-json-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-json-validation>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Number'">
+        <sqx-number-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-number-validation>
+    </ng-container>
+    <ng-container *ngSwitchCase="'References'">
+        <sqx-references-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-references-validation>
+    </ng-container>
+    <ng-container *ngSwitchCase="'String'">
+        <sqx-string-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties" [patterns]="patterns"></sqx-string-validation>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Tags'">
+        <sqx-tags-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-tags-validation>
+    </ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.scss b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.ts b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.ts
new file mode 100644
index 000000000..0bdc39371
--- /dev/null
+++ b/frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.ts
@@ -0,0 +1,27 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { FieldDto, PatternDto } from '@app/shared';
+
+@Component({
+    selector: 'sqx-field-form-validation',
+    styleUrls: ['./field-form-validation.component.scss'],
+    templateUrl: './field-form-validation.component.html'
+})
+export class FieldFormValidationComponent {
+    @Input()
+    public editForm: FormGroup;
+
+    @Input()
+    public field: FieldDto;
+
+    @Input()
+    public patterns: ReadonlyArray<PatternDto>;
+}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.html b/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.html
new file mode 100644
index 000000000..274beedc0
--- /dev/null
+++ b/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.html
@@ -0,0 +1,30 @@
+<div class="table-items-row-details-tabs clearfix">
+    <ul class="nav nav-tabs2">
+        <li class="nav-item">
+            <a class="nav-link" (click)="selectTab(0)" [class.active]="selectedTab === 0">Common</a>
+        </li>
+        <li class="nav-item" [class.hidden]="!field.properties.isContentField">
+            <a class="nav-link" (click)="selectTab(1)" [class.active]="selectedTab === 1">Validation</a>
+        </li>
+        <li class="nav-item" [class.hidden]="!field.properties.isContentField || field.properties.fieldType === 'Array'">
+            <a class="nav-link" (click)="selectTab(2)" [class.active]="selectedTab === 2">Editing</a>
+        </li>
+    </ul>
+
+    <div class="float-right" *ngIf="showButtons">
+        <button [disabled]="field.isLocked" type="reset" class="btn btn-text-secondary2" (click)="cancel.emit()">Cancel</button>
+        <button [disabled]="field.isLocked" type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">Save</button>
+    </div>
+</div>
+
+<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 0">
+    <sqx-field-form-common [editForm]="editForm" [editFormSubmitted]="editFormSubmitted " [field]="field"></sqx-field-form-common>
+</div>
+
+<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 1">
+    <sqx-field-form-validation [patterns]="patterns" [editForm]="editForm" [field]="field"></sqx-field-form-validation>
+</div>
+
+<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 2">
+    <sqx-field-form-ui [editForm]="editForm" [field]="field"></sqx-field-form-ui>
+</div>
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.scss b/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.ts b/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.ts
new file mode 100644
index 000000000..de35bbdec
--- /dev/null
+++ b/frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.ts
@@ -0,0 +1,53 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { FieldDto, PatternDto } from '@app/shared';
+
+@Component({
+    selector: 'sqx-field-form',
+    styleUrls: ['./field-form.component.scss'],
+    templateUrl: './field-form.component.html'
+})
+export class FieldFormComponent implements AfterViewInit {
+    @Input()
+    public showButtons: boolean;
+
+    @Input()
+    public isEditable: boolean;
+
+    @Input()
+    public editForm: FormGroup;
+
+    @Input()
+    public editFormSubmitted: boolean;
+
+    @Input()
+    public patterns: ReadonlyArray<PatternDto>;
+
+    @Input()
+    public field: FieldDto;
+
+    @Output()
+    public cancel = new EventEmitter();
+
+    public selectedTab = 0;
+
+    public ngAfterViewInit() {
+        if (!this.isEditable) {
+            this.editForm.disable();
+        } else {
+            this.editForm.enable();
+        }
+    }
+
+    public selectTab(tab: number) {
+        this.selectedTab = tab;
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/schema-fields.component.html b/frontend/app/features/schemas/pages/schema/fields/schema-fields.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-fields.component.html
rename to frontend/app/features/schemas/pages/schema/fields/schema-fields.component.html
diff --git a/frontend/app/features/schemas/pages/schema/schema-fields.component.scss b/frontend/app/features/schemas/pages/schema/fields/schema-fields.component.scss
similarity index 90%
rename from frontend/app/features/schemas/pages/schema/schema-fields.component.scss
rename to frontend/app/features/schemas/pages/schema/fields/schema-fields.component.scss
index 7b7990804..b4b9e68d6 100644
--- a/frontend/app/features/schemas/pages/schema/schema-fields.component.scss
+++ b/frontend/app/features/schemas/pages/schema/fields/schema-fields.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host {
     overflow-x: hidden;
     overflow-y: auto;
diff --git a/frontend/app/features/schemas/pages/schema/schema-fields.component.ts b/frontend/app/features/schemas/pages/schema/fields/schema-fields.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-fields.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/schema-fields.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/array-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/array-validation.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/array-validation.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/array-validation.component.html
diff --git a/frontend/app/features/schemas/pages/schema/types/array-validation.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/array-validation.component.scss
similarity index 81%
rename from frontend/app/features/schemas/pages/schema/types/array-validation.component.scss
rename to frontend/app/features/schemas/pages/schema/fields/types/array-validation.component.scss
index 04dcbf5de..63166b94e 100644
--- a/frontend/app/features/schemas/pages/schema/types/array-validation.component.scss
+++ b/frontend/app/features/schemas/pages/schema/fields/types/array-validation.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .minmax {
     &-col {
         position: relative;
diff --git a/frontend/app/features/schemas/pages/schema/types/array-validation.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/array-validation.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/array-validation.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/array-validation.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/assets-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/assets-ui.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/types/assets-ui.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/assets-ui.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/assets-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/assets-validation.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.html
diff --git a/frontend/app/features/schemas/pages/schema/types/assets-validation.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.scss
similarity index 84%
rename from frontend/app/features/schemas/pages/schema/types/assets-validation.component.scss
rename to frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.scss
index ab3a93d10..347cb10dc 100644
--- a/frontend/app/features/schemas/pages/schema/types/assets-validation.component.scss
+++ b/frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .minmax {
     &-col {
         position: relative;
diff --git a/frontend/app/features/schemas/pages/schema/types/assets-validation.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/assets-validation.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/boolean-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/boolean-ui.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/types/boolean-ui.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/boolean-ui.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/boolean-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/boolean-validation.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/types/boolean-validation.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/boolean-validation.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/date-time-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/date-time-ui.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/date-time-ui.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/date-time-ui.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/date-time-ui.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/date-time-ui.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/types/date-time-ui.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/date-time-ui.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/date-time-ui.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/date-time-ui.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/date-time-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/date-time-validation.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/types/date-time-validation.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/date-time-validation.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/geolocation-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/geolocation-ui.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/geolocation-ui.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/geolocation-ui.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/geolocation-ui.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/geolocation-ui.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/types/geolocation-ui.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/geolocation-ui.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/geolocation-ui.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/geolocation-ui.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/geolocation-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/geolocation-validation.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/geolocation-validation.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/geolocation-validation.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/geolocation-validation.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/geolocation-validation.component.scss
new file mode 100644
index 000000000..dec52f4bc
--- /dev/null
+++ b/frontend/app/features/schemas/pages/schema/fields/types/geolocation-validation.component.scss
@@ -0,0 +1,3 @@
+.form-group {
+    margin-top: .5rem;
+}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/geolocation-validation.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/geolocation-validation.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/geolocation-validation.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/geolocation-validation.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/json-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/json-ui.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/json-ui.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/json-ui.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/json-ui.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/json-ui.component.scss
new file mode 100644
index 000000000..1199047a8
--- /dev/null
+++ b/frontend/app/features/schemas/pages/schema/fields/types/json-ui.component.scss
@@ -0,0 +1,3 @@
+.form-group {
+    margin: 0;
+}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/json-ui.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/json-ui.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/json-ui.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/json-ui.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/json-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/json-validation.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/json-validation.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/json-validation.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/json-validation.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/json-validation.component.scss
new file mode 100644
index 000000000..dec52f4bc
--- /dev/null
+++ b/frontend/app/features/schemas/pages/schema/fields/types/json-validation.component.scss
@@ -0,0 +1,3 @@
+.form-group {
+    margin-top: .5rem;
+}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/json-validation.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/json-validation.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/json-validation.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/json-validation.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/number-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/number-ui.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/types/number-ui.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/number-ui.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/number-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/number-validation.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.html
diff --git a/frontend/app/features/schemas/pages/schema/types/number-validation.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.scss
similarity index 76%
rename from frontend/app/features/schemas/pages/schema/types/number-validation.component.scss
rename to frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.scss
index c404d5929..c7b39858f 100644
--- a/frontend/app/features/schemas/pages/schema/types/number-validation.component.scss
+++ b/frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .minmax {
     &-col {
         position: relative;
diff --git a/frontend/app/features/schemas/pages/schema/types/number-validation.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/number-validation.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/references-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/references-ui.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/references-ui.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/references-ui.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/references-ui.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/references-ui.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/types/references-ui.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/references-ui.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/references-ui.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/references-ui.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/references-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/references-validation.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html
diff --git a/frontend/app/features/schemas/pages/schema/types/references-validation.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.scss
similarity index 81%
rename from frontend/app/features/schemas/pages/schema/types/references-validation.component.scss
rename to frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.scss
index 04dcbf5de..63166b94e 100644
--- a/frontend/app/features/schemas/pages/schema/types/references-validation.component.scss
+++ b/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .minmax {
     &-col {
         position: relative;
diff --git a/frontend/app/features/schemas/pages/schema/types/references-validation.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/references-validation.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/string-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/string-ui.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/string-ui.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/string-ui.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/string-ui.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/string-ui.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/types/string-ui.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/string-ui.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/string-ui.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/string-ui.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/string-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/string-validation.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.html
diff --git a/frontend/app/features/schemas/pages/schema/types/string-validation.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.scss
similarity index 93%
rename from frontend/app/features/schemas/pages/schema/types/string-validation.component.scss
rename to frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.scss
index 4d9a2db97..922cb129e 100644
--- a/frontend/app/features/schemas/pages/schema/types/string-validation.component.scss
+++ b/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .minmax {
     &-col {
         position: relative;
diff --git a/frontend/app/features/schemas/pages/schema/types/string-validation.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/string-validation.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/tags-ui.component.html b/frontend/app/features/schemas/pages/schema/fields/types/tags-ui.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/tags-ui.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/tags-ui.component.html
diff --git a/frontend/app/features/schemas/pages/schema/fields/types/tags-ui.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/tags-ui.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/schemas/pages/schema/types/tags-ui.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/tags-ui.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/tags-ui.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/tags-ui.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/tags-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/tags-validation.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/tags-validation.component.html
rename to frontend/app/features/schemas/pages/schema/fields/types/tags-validation.component.html
diff --git a/frontend/app/features/schemas/pages/schema/types/tags-validation.component.scss b/frontend/app/features/schemas/pages/schema/fields/types/tags-validation.component.scss
similarity index 81%
rename from frontend/app/features/schemas/pages/schema/types/tags-validation.component.scss
rename to frontend/app/features/schemas/pages/schema/fields/types/tags-validation.component.scss
index 04dcbf5de..63166b94e 100644
--- a/frontend/app/features/schemas/pages/schema/types/tags-validation.component.scss
+++ b/frontend/app/features/schemas/pages/schema/fields/types/tags-validation.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .minmax {
     &-col {
         position: relative;
diff --git a/frontend/app/features/schemas/pages/schema/types/tags-validation.component.ts b/frontend/app/features/schemas/pages/schema/fields/types/tags-validation.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/types/tags-validation.component.ts
rename to frontend/app/features/schemas/pages/schema/fields/types/tags-validation.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts b/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts
deleted file mode 100644
index e7d204317..000000000
--- a/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { Component, Input } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-
-import { FieldDto } from '@app/shared';
-
-@Component({
-    selector: 'sqx-field-form-common',
-    template: `
-        <div [formGroup]="editForm">
-            <div class="form-group row">
-                <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldName">Name</label>
-
-                <div class="col-7">
-                    <input type="text" class="form-control" id="{{field.fieldId}}_fieldName" readonly [ngModel]="field.name" [ngModelOptions]="standalone" />
-
-                    <sqx-form-hint>
-                        The name of the field in the API response.
-                    </sqx-form-hint>
-                </div>
-            </div>
-
-            <div class="form-group row">
-                <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldLabel">Label</label>
-
-                <div class="col-7">
-                    <sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors>
-
-                    <input type="text" class="form-control" id="{{field.fieldId}}_fieldLabel" maxlength="100" formControlName="label" />
-
-                    <sqx-form-hint>
-                        Display name for documentation and user interfaces.
-                    </sqx-form-hint>
-                </div>
-            </div>
-
-            <div class="form-group row">
-                <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldHints">Hints</label>
-
-                <div class="col-7">
-                    <sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors>
-
-                    <input type="text" class="form-control" id="{{field.fieldId}}_fieldHints" maxlength="100" formControlName="hints" />
-
-                    <sqx-form-hint>
-                        Describe this field for documentation and user interfaces.
-                    </sqx-form-hint>
-                </div>
-            </div>
-
-            <div class="form-group row" *ngIf="field.properties.isContentField">
-                 <label class="col-3 col-form-label">Tags</label>
-
-                <div class="col-7">
-                    <sqx-tag-editor id="schemaTags" formControlName="tags"></sqx-tag-editor>
-
-                    <sqx-form-hint>
-                        Tags to annotate your field for automation processes.
-                    </sqx-form-hint>
-                </div>
-            </div>
-        </div>
-    `
-})
-export class FieldFormCommonComponent {
-    public readonly standalone = { standalone: true };
-
-    @Input()
-    public editForm: FormGroup;
-
-    @Input()
-    public editFormSubmitted = false;
-
-    @Input()
-    public field: FieldDto;
-}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/forms/field-form-ui.component.ts b/frontend/app/features/schemas/pages/schema/forms/field-form-ui.component.ts
deleted file mode 100644
index f6b3f0e29..000000000
--- a/frontend/app/features/schemas/pages/schema/forms/field-form-ui.component.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { Component, Input } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-
-import { FieldDto } from '@app/shared';
-
-@Component({
-    selector: 'sqx-field-form-ui',
-    template: `
-        <ng-container [ngSwitch]="field.rawProperties.fieldType">
-            <ng-container *ngSwitchCase="'Assets'">
-                <sqx-assets-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-assets-ui>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Boolean'">
-                <sqx-boolean-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-boolean-ui>
-            </ng-container>
-            <ng-container *ngSwitchCase="'DateTime'">
-                <sqx-date-time-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-date-time-ui>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Geolocation'">
-                <sqx-geolocation-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-geolocation-ui>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Json'">
-                <sqx-json-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-json-ui>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Number'">
-                <sqx-number-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-number-ui>
-            </ng-container>
-            <ng-container *ngSwitchCase="'References'">
-                <sqx-references-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-references-ui>
-            </ng-container>
-            <ng-container *ngSwitchCase="'String'">
-                <sqx-string-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-string-ui>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Tags'">
-                <sqx-tags-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-tags-ui>
-            </ng-container>
-        </ng-container>
-    `
-})
-export class FieldFormUIComponent {
-    @Input()
-    public editForm: FormGroup;
-
-    @Input()
-    public field: FieldDto;
-}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/forms/field-form-validation.component.ts b/frontend/app/features/schemas/pages/schema/forms/field-form-validation.component.ts
deleted file mode 100644
index f1a63eb47..000000000
--- a/frontend/app/features/schemas/pages/schema/forms/field-form-validation.component.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { Component, Input } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-
-import { FieldDto, PatternDto } from '@app/shared';
-
-@Component({
-    selector: 'sqx-field-form-validation',
-    template: `
-        <ng-container [ngSwitch]="field.rawProperties.fieldType">
-            <ng-container *ngSwitchCase="'Array'">
-                <sqx-array-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-array-validation>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Assets'">
-                <sqx-assets-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-assets-validation>
-            </ng-container>
-            <ng-container *ngSwitchCase="'DateTime'">
-                <sqx-date-time-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-date-time-validation>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Boolean'">
-                <sqx-boolean-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-boolean-validation>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Geolocation'">
-                <sqx-geolocation-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-geolocation-validation>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Json'">
-                <sqx-json-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-json-validation>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Number'">
-                <sqx-number-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-number-validation>
-            </ng-container>
-            <ng-container *ngSwitchCase="'References'">
-                <sqx-references-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-references-validation>
-            </ng-container>
-            <ng-container *ngSwitchCase="'String'">
-                <sqx-string-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties" [patterns]="patterns"></sqx-string-validation>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Tags'">
-                <sqx-tags-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-tags-validation>
-            </ng-container>
-        </ng-container>
-    `
-})
-export class FieldFormValidationComponent {
-    @Input()
-    public editForm: FormGroup;
-
-    @Input()
-    public field: FieldDto;
-
-    @Input()
-    public patterns: ReadonlyArray<PatternDto>;
-}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts b/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts
deleted file mode 100644
index e67b5ce80..000000000
--- a/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-
-import { FieldDto, PatternDto } from '@app/shared';
-
-@Component({
-    selector: 'sqx-field-form',
-    template: `
-        <div class="table-items-row-details-tabs clearfix">
-            <ul class="nav nav-tabs2">
-                <li class="nav-item">
-                    <a class="nav-link" (click)="selectTab(0)" [class.active]="selectedTab === 0">Common</a>
-                </li>
-                <li class="nav-item" [class.hidden]="!field.properties.isContentField">
-                    <a class="nav-link" (click)="selectTab(1)" [class.active]="selectedTab === 1">Validation</a>
-                </li>
-                <li class="nav-item" [class.hidden]="!field.properties.isContentField || field.properties.fieldType === 'Array'">
-                    <a class="nav-link" (click)="selectTab(2)" [class.active]="selectedTab === 2">Editing</a>
-                </li>
-            </ul>
-
-            <div class="float-right" *ngIf="showButtons">
-                <button [disabled]="field.isLocked" type="reset" class="btn btn-text-secondary2" (click)="cancel.emit()">Cancel</button>
-                <button [disabled]="field.isLocked" type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">Save</button>
-            </div>
-        </div>
-
-        <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 0">
-            <sqx-field-form-common [editForm]="editForm" [editFormSubmitted]="editFormSubmitted " [field]="field"></sqx-field-form-common>
-        </div>
-
-        <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 1">
-            <sqx-field-form-validation [patterns]="patterns" [editForm]="editForm" [field]="field"></sqx-field-form-validation>
-        </div>
-
-        <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 2">
-            <sqx-field-form-ui [editForm]="editForm" [field]="field"></sqx-field-form-ui>
-        </div>
-    `
-})
-export class FieldFormComponent implements AfterViewInit {
-    @Input()
-    public showButtons: boolean;
-
-    @Input()
-    public isEditable: boolean;
-
-    @Input()
-    public editForm: FormGroup;
-
-    @Input()
-    public editFormSubmitted: boolean;
-
-    @Input()
-    public patterns: ReadonlyArray<PatternDto>;
-
-    @Input()
-    public field: FieldDto;
-
-    @Output()
-    public cancel = new EventEmitter();
-
-    public selectedTab = 0;
-
-    public ngAfterViewInit() {
-        if (!this.isEditable) {
-            this.editForm.disable();
-        } else {
-            this.editForm.enable();
-        }
-    }
-
-    public selectTab(tab: number) {
-        this.selectedTab = tab;
-    }
-}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/schema-preview-urls-form.component.html b/frontend/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-preview-urls-form.component.html
rename to frontend/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.html
diff --git a/frontend/app/features/schemas/pages/schema/schema-preview-urls-form.component.scss b/frontend/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.scss
similarity index 82%
rename from frontend/app/features/schemas/pages/schema/schema-preview-urls-form.component.scss
rename to frontend/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.scss
index 3724160b0..95f5fe672 100644
--- a/frontend/app/features/schemas/pages/schema/schema-preview-urls-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .content {
     margin-top: 1rem;
 }
diff --git a/frontend/app/features/schemas/pages/schema/schema-preview-urls-form.component.ts b/frontend/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-preview-urls-form.component.ts
rename to frontend/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/schema-page.component.scss b/frontend/app/features/schemas/pages/schema/schema-page.component.scss
index 8d0a3c7eb..778f3311f 100644
--- a/frontend/app/features/schemas/pages/schema/schema-page.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .btn-publishing {
     &.disabled,
     &:disabled {
diff --git a/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.html b/frontend/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-scripts-form.component.html
rename to frontend/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.html
diff --git a/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss b/frontend/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.scss
similarity index 90%
rename from frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss
rename to frontend/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.scss
index 9f8d22053..58001f79a 100644
--- a/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host,
 .inner-form,
 .inner-main {
diff --git a/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.ts b/frontend/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-scripts-form.component.ts
rename to frontend/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/types/assets-ui.component.scss b/frontend/app/features/schemas/pages/schema/types/assets-ui.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/features/schemas/pages/schema/types/assets-ui.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/boolean-ui.component.scss b/frontend/app/features/schemas/pages/schema/types/boolean-ui.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/features/schemas/pages/schema/types/boolean-ui.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/boolean-validation.component.scss b/frontend/app/features/schemas/pages/schema/types/boolean-validation.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/features/schemas/pages/schema/types/boolean-validation.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/date-time-ui.component.scss b/frontend/app/features/schemas/pages/schema/types/date-time-ui.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/features/schemas/pages/schema/types/date-time-ui.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/date-time-validation.component.scss b/frontend/app/features/schemas/pages/schema/types/date-time-validation.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/features/schemas/pages/schema/types/date-time-validation.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/geolocation-ui.component.scss b/frontend/app/features/schemas/pages/schema/types/geolocation-ui.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/features/schemas/pages/schema/types/geolocation-ui.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/geolocation-validation.component.scss b/frontend/app/features/schemas/pages/schema/types/geolocation-validation.component.scss
deleted file mode 100644
index c976f1922..000000000
--- a/frontend/app/features/schemas/pages/schema/types/geolocation-validation.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '_vars';
-@import '_mixins';
-
-.form-group {
-    margin-top: .5rem;
-}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/json-ui.component.scss b/frontend/app/features/schemas/pages/schema/types/json-ui.component.scss
deleted file mode 100644
index 1f393a181..000000000
--- a/frontend/app/features/schemas/pages/schema/types/json-ui.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '_vars';
-@import '_mixins';
-
-.form-group {
-    margin: 0;
-}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/json-validation.component.scss b/frontend/app/features/schemas/pages/schema/types/json-validation.component.scss
deleted file mode 100644
index c976f1922..000000000
--- a/frontend/app/features/schemas/pages/schema/types/json-validation.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '_vars';
-@import '_mixins';
-
-.form-group {
-    margin-top: .5rem;
-}
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/number-ui.component.scss b/frontend/app/features/schemas/pages/schema/types/number-ui.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/features/schemas/pages/schema/types/number-ui.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/references-ui.component.scss b/frontend/app/features/schemas/pages/schema/types/references-ui.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/features/schemas/pages/schema/types/references-ui.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/string-ui.component.scss b/frontend/app/features/schemas/pages/schema/types/string-ui.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/features/schemas/pages/schema/types/string-ui.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/types/tags-ui.component.scss b/frontend/app/features/schemas/pages/schema/types/tags-ui.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/features/schemas/pages/schema/types/tags-ui.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/field-list.component.html b/frontend/app/features/schemas/pages/schema/ui/field-list.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/field-list.component.html
rename to frontend/app/features/schemas/pages/schema/ui/field-list.component.html
diff --git a/frontend/app/features/schemas/pages/schema/field-list.component.scss b/frontend/app/features/schemas/pages/schema/ui/field-list.component.scss
similarity index 92%
rename from frontend/app/features/schemas/pages/schema/field-list.component.scss
rename to frontend/app/features/schemas/pages/schema/ui/field-list.component.scss
index c304a0964..0851981ac 100644
--- a/frontend/app/features/schemas/pages/schema/field-list.component.scss
+++ b/frontend/app/features/schemas/pages/schema/ui/field-list.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .field-list {
     & {
         overflow-x: hidden;
diff --git a/frontend/app/features/schemas/pages/schema/field-list.component.ts b/frontend/app/features/schemas/pages/schema/ui/field-list.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/field-list.component.ts
rename to frontend/app/features/schemas/pages/schema/ui/field-list.component.ts
diff --git a/frontend/app/features/schemas/pages/schema/schema-ui-form.component.html b/frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.html
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-ui-form.component.html
rename to frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.html
diff --git a/frontend/app/features/schemas/pages/schema/schema-ui-form.component.scss b/frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.scss
similarity index 88%
rename from frontend/app/features/schemas/pages/schema/schema-ui-form.component.scss
rename to frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.scss
index 4ffde1f88..1fc52e501 100644
--- a/frontend/app/features/schemas/pages/schema/schema-ui-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host,
 .inner-form,
 .inner-main {
diff --git a/frontend/app/features/schemas/pages/schema/schema-ui-form.component.ts b/frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.ts
similarity index 100%
rename from frontend/app/features/schemas/pages/schema/schema-ui-form.component.ts
rename to frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.ts
diff --git a/frontend/app/features/schemas/pages/schemas/schema-form.component.html b/frontend/app/features/schemas/pages/schemas/schema-form.component.html
index 291b137a3..87627a5b6 100644
--- a/frontend/app/features/schemas/pages/schemas/schema-form.component.html
+++ b/frontend/app/features/schemas/pages/schemas/schema-form.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="createForm.form" (ngSubmit)="createSchema()">     
-    <sqx-modal-dialog (close)="emitCancel()" [large]="false">
+    <sqx-modal-dialog (close)="cancel.emit()">
         <ng-container title>
             <ng-container *ngIf="import; else noImport">
                 Clone Schema
@@ -82,7 +82,7 @@
         </ng-container>
 
         <ng-container footer>
-            <button type="reset" class="float-left btn btn-secondary" (click)="emitCancel()">Cancel</button>
+            <button type="reset" class="float-left btn btn-secondary" (click)="cancel.emit()">Cancel</button>
             <button type="submit" class="float-right btn btn-success">Create</button>
         </ng-container>
     </sqx-modal-dialog>
diff --git a/frontend/app/features/schemas/pages/schemas/schema-form.component.scss b/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
index 6e51df9be..c9a91d893 100644
--- a/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
+++ b/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 $icon-size: 4.5rem;
 
 .btn-text {
diff --git a/frontend/app/features/schemas/pages/schemas/schema-form.component.ts b/frontend/app/features/schemas/pages/schemas/schema-form.component.ts
index 1bc12ccc0..5fab111e5 100644
--- a/frontend/app/features/schemas/pages/schemas/schema-form.component.ts
+++ b/frontend/app/features/schemas/pages/schemas/schema-form.component.ts
@@ -59,10 +59,6 @@ export class SchemaFormComponent implements OnInit {
         this.complete.emit(value);
     }
 
-    public emitCancel() {
-        this.cancel.emit();
-    }
-
     public createSchema() {
         const value = this.createForm.submit();
 
diff --git a/frontend/app/features/schemas/pages/schemas/schemas-page.component.scss b/frontend/app/features/schemas/pages/schemas/schemas-page.component.scss
index ad9f41120..0e23f8b6f 100644
--- a/frontend/app/features/schemas/pages/schemas/schemas-page.component.scss
+++ b/frontend/app/features/schemas/pages/schemas/schemas-page.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 $button-size: calc(2.5rem - 2px);
 
 .subheader-button {
diff --git a/frontend/app/features/settings/pages/backups/backup.component.html b/frontend/app/features/settings/pages/backups/backup.component.html
new file mode 100644
index 000000000..777686922
--- /dev/null
+++ b/frontend/app/features/settings/pages/backups/backup.component.html
@@ -0,0 +1,49 @@
+<div class="table-items-row">
+    <div class="row">
+        <div class="col-auto" [ngSwitch]="backup.status">
+            <sqx-status-icon size="lg" [status]="backup.status"></sqx-status-icon>
+        </div>
+        <div class="col-auto">
+            <div>
+                Started:
+            </div>
+            <div>
+                Duration:
+            </div>
+        </div>
+        <div class="col-3">
+            <div>
+                {{backup.started | sqxFromNow}}
+            </div>
+            <div *ngIf="backup.stopped">
+                {{duration}}
+            </div>
+        </div>
+        <div class="col">
+            <div>
+                <span title="Archived events">
+                    Events: <strong class="backup-progress">{{backup.handledEvents | sqxKNumber}}</strong>
+                </span>,
+                <span title="Archived assets">
+                    Assets: <strong class="backup-progress">{{backup.handledAssets | sqxKNumber}}</strong>
+                </span>
+            </div>
+            <div *ngIf="backup.stopped && !backup.isFailed">
+                Download:
+
+                <a href="{{apiUrl.buildUrl(backup.downloadUrl)}}" sqxExternalLink="noicon">
+                    Ready <i class="icon-external-link"></i>
+                </a>
+            </div>
+        </div>
+        <div class="col-auto">
+            <button type="button" class="btn btn-text-danger mt-1"
+                [disabled]="!backup.canDelete"
+                (sqxConfirmClick)="delete()"
+                confirmTitle="Delete backup"
+                confirmText="Do you really want to delete the backup?">
+                <i class="icon-bin2"></i>
+            </button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/backups/backup.component.scss b/frontend/app/features/settings/pages/backups/backup.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/settings/pages/backups/backup.component.ts b/frontend/app/features/settings/pages/backups/backup.component.ts
index 257634d81..e1202c77b 100644
--- a/frontend/app/features/settings/pages/backups/backup.component.ts
+++ b/frontend/app/features/settings/pages/backups/backup.component.ts
@@ -16,57 +16,8 @@ import {
 
 @Component({
     selector: 'sqx-backup',
-    template: `
-        <div class="table-items-row">
-            <div class="row">
-                <div class="col-auto" [ngSwitch]="backup.status">
-                    <sqx-status-icon size="lg" [status]="backup.status"></sqx-status-icon>
-                </div>
-                <div class="col-auto">
-                    <div>
-                        Started:
-                    </div>
-                    <div>
-                        Duration:
-                    </div>
-                </div>
-                <div class="col-3">
-                    <div>
-                        {{backup.started | sqxFromNow}}
-                    </div>
-                    <div *ngIf="backup.stopped">
-                        {{duration}}
-                    </div>
-                </div>
-                <div class="col">
-                    <div>
-                        <span title="Archived events">
-                            Events: <strong class="backup-progress">{{backup.handledEvents | sqxKNumber}}</strong>
-                        </span>,
-                        <span title="Archived assets">
-                            Assets: <strong class="backup-progress">{{backup.handledAssets | sqxKNumber}}</strong>
-                        </span>
-                    </div>
-                    <div *ngIf="backup.stopped && !backup.isFailed">
-                        Download:
-
-                        <a href="{{apiUrl.buildUrl(backup.downloadUrl)}}" sqxExternalLink="noicon">
-                            Ready <i class="icon-external-link"></i>
-                        </a>
-                    </div>
-                </div>
-                <div class="col-auto">
-                    <button type="button" class="btn btn-text-danger mt-1"
-                        [disabled]="!backup.canDelete"
-                        (sqxConfirmClick)="delete()"
-                        confirmTitle="Delete backup"
-                        confirmText="Do you really want to delete the backup?">
-                        <i class="icon-bin2"></i>
-                    </button>
-                </div>
-            </div>
-        </div>
-    `,
+    styleUrls: ['./backup.component.scss'],
+    templateUrl: './backup.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BackupComponent {
diff --git a/frontend/app/features/settings/pages/backups/backups-page.component.scss b/frontend/app/features/settings/pages/backups/backups-page.component.scss
index fbb752506..e69de29bb 100644
--- a/frontend/app/features/settings/pages/backups/backups-page.component.scss
+++ b/frontend/app/features/settings/pages/backups/backups-page.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/clients/client-add-form.component.html b/frontend/app/features/settings/pages/clients/client-add-form.component.html
new file mode 100644
index 000000000..a8d011b34
--- /dev/null
+++ b/frontend/app/features/settings/pages/clients/client-add-form.component.html
@@ -0,0 +1,17 @@
+<div class="table-items-footer">
+    <form [formGroup]="addClientForm.form" (ngSubmit)="addClient()">
+        <div class="row no-gutters">
+            <div class="col">
+                <sqx-control-errors for="name" [submitted]="addClientForm.submitted | async"></sqx-control-errors>
+
+                <input type="text" class="form-control" formControlName="id" maxlength="40" placeholder="Enter client name" autocomplete="off" sqxTransformInput="LowerCase" />
+            </div>
+            <div class="col-auto pl-1">
+                <button type="submit" class="btn btn-success" [disabled]="addClientForm.hasNoId | async">Add Client</button>
+            </div>
+            <div class="col-auto pl-1">
+                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">Cancel</button>
+            </div>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/clients/client-add-form.component.scss b/frontend/app/features/settings/pages/clients/client-add-form.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/settings/pages/clients/client-add-form.component.ts b/frontend/app/features/settings/pages/clients/client-add-form.component.ts
index 2f8930230..058ce5cad 100644
--- a/frontend/app/features/settings/pages/clients/client-add-form.component.ts
+++ b/frontend/app/features/settings/pages/clients/client-add-form.component.ts
@@ -12,25 +12,8 @@ import { AddClientForm, ClientsState } from '@app/shared';
 
 @Component({
     selector: 'sqx-client-add-form',
-    template: `
-        <div class="table-items-footer">
-            <form [formGroup]="addClientForm.form" (ngSubmit)="addClient()">
-                <div class="row no-gutters">
-                    <div class="col">
-                        <sqx-control-errors for="name" [submitted]="addClientForm.submitted | async"></sqx-control-errors>
-
-                        <input type="text" class="form-control" formControlName="id" maxlength="40" placeholder="Enter client name" autocomplete="off" sqxTransformInput="LowerCase" />
-                    </div>
-                    <div class="col-auto pl-1">
-                        <button type="submit" class="btn btn-success" [disabled]="addClientForm.hasNoId | async">Add Client</button>
-                    </div>
-                    <div class="col-auto pl-1">
-                        <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">Cancel</button>
-                    </div>
-                </div>
-            </form>
-        </div>
-    `,
+    styleUrls: ['./client-add-form.component.scss'],
+    templateUrl: './client-add-form.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ClientAddFormComponent {
diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.html b/frontend/app/features/settings/pages/clients/client-connect-form.component.html
index e48f8e9ec..2109a9b9d 100644
--- a/frontend/app/features/settings/pages/clients/client-connect-form.component.html
+++ b/frontend/app/features/settings/pages/clients/client-connect-form.component.html
@@ -1,4 +1,4 @@
-<sqx-modal-dialog (close)="emitComplete()" large="true">
+<sqx-modal-dialog (close)="complete.emit()" size="lg" >
     <ng-container title>
         Connect
     </ng-container>
diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.scss b/frontend/app/features/settings/pages/clients/client-connect-form.component.scss
index a93f684b8..27e4bd5f9 100644
--- a/frontend/app/features/settings/pages/clients/client-connect-form.component.scss
+++ b/frontend/app/features/settings/pages/clients/client-connect-form.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .badge {
     @include circle(1.3rem);
     font-size: 80%;
diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.ts b/frontend/app/features/settings/pages/clients/client-connect-form.component.ts
index 459455ee5..5b587e724 100644
--- a/frontend/app/features/settings/pages/clients/client-connect-form.component.ts
+++ b/frontend/app/features/settings/pages/clients/client-connect-form.component.ts
@@ -72,10 +72,6 @@ export class ClientConnectFormComponent implements OnInit {
     public go(step: string) {
         this.step = step;
     }
-
-    public emitComplete() {
-        this.complete.emit();
-    }
 }
 
 function connectHttpText(apiUrl: ApiUrlConfig, app: string, client: { id: string, secret: string }) {
diff --git a/frontend/app/features/settings/pages/clients/client.component.scss b/frontend/app/features/settings/pages/clients/client.component.scss
index 11c5f08c2..29d4f11cc 100644
--- a/frontend/app/features/settings/pages/clients/client.component.scss
+++ b/frontend/app/features/settings/pages/clients/client.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .card {
     & {
         margin-bottom: .25rem;
diff --git a/frontend/app/features/settings/pages/clients/clients-page.component.scss b/frontend/app/features/settings/pages/clients/clients-page.component.scss
index fbb752506..e69de29bb 100644
--- a/frontend/app/features/settings/pages/clients/clients-page.component.scss
+++ b/frontend/app/features/settings/pages/clients/clients-page.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss
index 55a7f9849..0dd6e63aa 100644
--- a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss
+++ b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .autocomplete-user {
     & {
         @include truncate;
diff --git a/frontend/app/features/settings/pages/contributors/contributor.component.html b/frontend/app/features/settings/pages/contributors/contributor.component.html
new file mode 100644
index 000000000..1f20ab634
--- /dev/null
+++ b/frontend/app/features/settings/pages/contributors/contributor.component.html
@@ -0,0 +1,26 @@
+<tr>
+    <td class="cell-user">
+        <img class="user-picture" title="{{contributor.contributorName}}" [src]="contributor.contributorId | sqxUserPicture" />
+    </td>
+    <td class="cell-auto">
+        <span class="user-name table-cell" [innerHTML]="contributor.contributorName | sqxHighlight:search"></span>
+    </td>
+    <td class="cell-time">
+        <select class="form-control"
+            [ngModel]="contributor.role"
+            (ngModelChange)="changeRole($event)"
+            [disabled]="!contributor.canUpdate">
+            <option *ngFor="let role of roles" [ngValue]="role.name">{{role.name}}</option>
+        </select>
+    </td>
+    <td class="cell-actions">
+        <button type="button" class="btn btn-text-danger"
+            [disabled]="!contributor.canRevoke"
+            (sqxConfirmClick)="remove()"
+            confirmTitle="Remove contributor"
+            confirmText="Do you really want to remove the contributor?">
+            <i class="icon-bin2"></i>
+        </button>
+    </td>
+</tr>
+<tr class="spacer"></tr>
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/contributors/contributor.component.scss b/frontend/app/features/settings/pages/contributors/contributor.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/settings/pages/contributors/contributor.component.ts b/frontend/app/features/settings/pages/contributors/contributor.component.ts
index 03a75a5c8..9d9ef23ac 100644
--- a/frontend/app/features/settings/pages/contributors/contributor.component.ts
+++ b/frontend/app/features/settings/pages/contributors/contributor.component.ts
@@ -17,34 +17,8 @@ import {
 
 @Component({
     selector: '[sqxContributor]',
-    template: `
-        <tr>
-            <td class="cell-user">
-                <img class="user-picture" title="{{contributor.contributorName}}" [src]="contributor.contributorId | sqxUserPicture" />
-            </td>
-            <td class="cell-auto">
-                <span class="user-name table-cell" [innerHTML]="contributor.contributorName | sqxHighlight:search"></span>
-            </td>
-            <td class="cell-time">
-                <select class="form-control"
-                    [ngModel]="contributor.role"
-                    (ngModelChange)="changeRole($event)"
-                    [disabled]="!contributor.canUpdate">
-                    <option *ngFor="let role of roles" [ngValue]="role.name">{{role.name}}</option>
-                </select>
-            </td>
-            <td class="cell-actions">
-                <button type="button" class="btn btn-text-danger"
-                    [disabled]="!contributor.canRevoke"
-                    (sqxConfirmClick)="remove()"
-                    confirmTitle="Remove contributor"
-                    confirmText="Do you really want to remove the contributor?">
-                    <i class="icon-bin2"></i>
-                </button>
-            </td>
-        </tr>
-        <tr class="spacer"></tr>
-    `,
+    styleUrls: ['./contributor.component.scss'],
+    templateUrl: './contributor.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContributorComponent {
diff --git a/frontend/app/features/settings/pages/contributors/contributors-page.component.scss b/frontend/app/features/settings/pages/contributors/contributors-page.component.scss
index bb69890d6..1331edaf9 100644
--- a/frontend/app/features/settings/pages/contributors/contributors-page.component.scss
+++ b/frontend/app/features/settings/pages/contributors/contributors-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .import-hint {
     padding-right: $panel-padding;
 }
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.html b/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.html
index e8597949c..fbc7a0352 100644
--- a/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.html
+++ b/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="importForm.form" (ngSubmit)="detect()">  
-    <sqx-modal-dialog (close)="emitClose()">
+    <sqx-modal-dialog (close)="close.emit()">
         <ng-container title>
             Import contributors
         </ng-container>
@@ -50,7 +50,7 @@
         </ng-container>
 
         <ng-container footer>
-            <button type="reset" class="float-left btn btn-secondary" (click)="emitClose()">Cancel</button>
+            <button type="reset" class="float-left btn btn-secondary" (click)="close.emit()">Cancel</button>
 
             <ng-container [ngSwitch]="importStage">
                 <ng-container *ngSwitchCase="'Start'">
diff --git a/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.scss b/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.scss
index 272f6207c..db4d839e8 100644
--- a/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.scss
+++ b/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 textarea {
     resize: none;
 }
diff --git a/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.ts b/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.ts
index c12d0194e..a61137211 100644
--- a/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.ts
+++ b/frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.ts
@@ -90,10 +90,6 @@ export class ImportContributorsDialogComponent {
                 ), 1)
         ).subscribe();
     }
-
-    public emitClose() {
-        this.close.emit();
-    }
 }
 
 function createRequest(status: ImportStatus) {
diff --git a/frontend/app/features/settings/pages/languages/language-add-form.component.html b/frontend/app/features/settings/pages/languages/language-add-form.component.html
new file mode 100644
index 000000000..364d37764
--- /dev/null
+++ b/frontend/app/features/settings/pages/languages/language-add-form.component.html
@@ -0,0 +1,14 @@
+<div class="table-items-footer">
+    <form [formGroup]="addLanguageForm.form" (ngSubmit)="addLanguage()">
+        <div class="row no-gutters">
+            <div class="col">
+                <select class="form-control" formControlName="language">
+                    <option *ngFor="let language of newLanguages" [ngValue]="language">{{language.englishName}}</option>
+                </select>
+            </div>
+            <div class="col-auto pl-1">
+                <button type="submit" class="btn btn-success">Add Language</button>
+            </div>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/languages/language-add-form.component.scss b/frontend/app/features/settings/pages/languages/language-add-form.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/settings/pages/languages/language-add-form.component.ts b/frontend/app/features/settings/pages/languages/language-add-form.component.ts
index 0f4335f98..c307bc348 100644
--- a/frontend/app/features/settings/pages/languages/language-add-form.component.ts
+++ b/frontend/app/features/settings/pages/languages/language-add-form.component.ts
@@ -16,22 +16,8 @@ import {
 
 @Component({
     selector: 'sqx-language-add-form',
-    template: `
-        <div class="table-items-footer">
-            <form [formGroup]="addLanguageForm.form" (ngSubmit)="addLanguage()">
-                <div class="row no-gutters">
-                    <div class="col">
-                        <select class="form-control" formControlName="language">
-                            <option *ngFor="let language of newLanguages" [ngValue]="language">{{language.englishName}}</option>
-                        </select>
-                    </div>
-                    <div class="col-auto pl-1">
-                        <button type="submit" class="btn btn-success">Add Language</button>
-                    </div>
-                </div>
-            </form>
-        </div>
-    `,
+    styleUrls: ['./language-add-form.component.scss'],
+    templateUrl: './language-add-form.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LanguageAddFormComponent implements OnChanges {
diff --git a/frontend/app/features/settings/pages/languages/language.component.scss b/frontend/app/features/settings/pages/languages/language.component.scss
index 3c5f53ab9..b2d30c2e5 100644
--- a/frontend/app/features/settings/pages/languages/language.component.scss
+++ b/frontend/app/features/settings/pages/languages/language.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 $field-header: #e7ebef;
 
 .language {
diff --git a/frontend/app/features/settings/pages/languages/languages-page.component.scss b/frontend/app/features/settings/pages/languages/languages-page.component.scss
index fbb752506..e69de29bb 100644
--- a/frontend/app/features/settings/pages/languages/languages-page.component.scss
+++ b/frontend/app/features/settings/pages/languages/languages-page.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/more/more-page.component.scss b/frontend/app/features/settings/pages/more/more-page.component.scss
index eaacb7164..f1e2f1cd7 100644
--- a/frontend/app/features/settings/pages/more/more-page.component.scss
+++ b/frontend/app/features/settings/pages/more/more-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .app {
     &-image {
         min-height: 150px;
diff --git a/frontend/app/features/settings/pages/patterns/pattern.component.scss b/frontend/app/features/settings/pages/patterns/pattern.component.scss
index d86c13db6..b281dc67e 100644
--- a/frontend/app/features/settings/pages/patterns/pattern.component.scss
+++ b/frontend/app/features/settings/pages/patterns/pattern.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .col-options {
     @include force-width(6rem);
 }
diff --git a/frontend/app/features/settings/pages/patterns/patterns-page.component.scss b/frontend/app/features/settings/pages/patterns/patterns-page.component.scss
index fbb752506..e69de29bb 100644
--- a/frontend/app/features/settings/pages/patterns/patterns-page.component.scss
+++ b/frontend/app/features/settings/pages/patterns/patterns-page.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/plans/plan.component.scss b/frontend/app/features/settings/pages/plans/plan.component.scss
index 7242ddf06..2f2d876ac 100644
--- a/frontend/app/features/settings/pages/plans/plan.component.scss
+++ b/frontend/app/features/settings/pages/plans/plan.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .plan {
     & {
         margin: .5rem;
diff --git a/frontend/app/features/settings/pages/plans/plans-page.component.scss b/frontend/app/features/settings/pages/plans/plans-page.component.scss
index cefe5d808..7b4a1462e 100644
--- a/frontend/app/features/settings/pages/plans/plans-page.component.scss
+++ b/frontend/app/features/settings/pages/plans/plans-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .plan {
     & {
         margin: .5rem;
diff --git a/frontend/app/features/settings/pages/roles/role-add-form.component.html b/frontend/app/features/settings/pages/roles/role-add-form.component.html
new file mode 100644
index 000000000..f779a34dc
--- /dev/null
+++ b/frontend/app/features/settings/pages/roles/role-add-form.component.html
@@ -0,0 +1,17 @@
+<div class="table-items-footer">
+    <form [formGroup]="addRoleForm.form" (ngSubmit)="addRole()">
+        <div class="row no-gutters">
+            <div class="col">
+                <sqx-control-errors for="name" [submitted]="addRoleForm.submitted | async"></sqx-control-errors>
+
+                <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter role name" autocomplete="off" />
+            </div>
+            <div class="col-auto pl-1">
+                <button type="submit" class="btn btn-success" [disabled]="addRoleForm.hasNoName | async">Add role</button>
+            </div>
+            <div class="col-auto pl-1">
+                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">Cancel</button>
+            </div>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/roles/role-add-form.component.scss b/frontend/app/features/settings/pages/roles/role-add-form.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/settings/pages/roles/role-add-form.component.ts b/frontend/app/features/settings/pages/roles/role-add-form.component.ts
index 7b011dd56..fc77d5f22 100644
--- a/frontend/app/features/settings/pages/roles/role-add-form.component.ts
+++ b/frontend/app/features/settings/pages/roles/role-add-form.component.ts
@@ -12,25 +12,8 @@ import { AddRoleForm, RolesState } from '@app/shared';
 
 @Component({
     selector: 'sqx-role-add-form',
-    template: `
-        <div class="table-items-footer">
-            <form [formGroup]="addRoleForm.form" (ngSubmit)="addRole()">
-                <div class="row no-gutters">
-                    <div class="col">
-                        <sqx-control-errors for="name" [submitted]="addRoleForm.submitted | async"></sqx-control-errors>
-
-                        <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter role name" autocomplete="off" />
-                    </div>
-                    <div class="col-auto pl-1">
-                        <button type="submit" class="btn btn-success" [disabled]="addRoleForm.hasNoName | async">Add role</button>
-                    </div>
-                    <div class="col-auto pl-1">
-                        <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">Cancel</button>
-                    </div>
-                </div>
-            </form>
-        </div>
-    `,
+    styleUrls: ['./role-add-form.component.scss'],
+    templateUrl: './role-add-form.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RoleAddFormComponent {
diff --git a/frontend/app/features/settings/pages/roles/role.component.scss b/frontend/app/features/settings/pages/roles/role.component.scss
index fc0c0ecff..00be886fc 100644
--- a/frontend/app/features/settings/pages/roles/role.component.scss
+++ b/frontend/app/features/settings/pages/roles/role.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .form-group {
     & {
         margin-bottom: .375rem;
diff --git a/frontend/app/features/settings/pages/roles/roles-page.component.scss b/frontend/app/features/settings/pages/roles/roles-page.component.scss
index fbb752506..e69de29bb 100644
--- a/frontend/app/features/settings/pages/roles/roles-page.component.scss
+++ b/frontend/app/features/settings/pages/roles/roles-page.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/workflows/workflow-add-form.component.html b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.html
new file mode 100644
index 000000000..bd4077e52
--- /dev/null
+++ b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.html
@@ -0,0 +1,17 @@
+<div class="table-items-footer">
+    <form [formGroup]="addWorkflowForm.form" (ngSubmit)="addWorkflow()">
+        <div class="row no-gutters">
+            <div class="col">
+                <sqx-control-errors for="name" [submitted]="addWorkflowForm.submitted | async"></sqx-control-errors>
+
+                <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter workflow name" autocomplete="off" />
+            </div>
+            <div class="col-auto pl-1">
+                <button type="submit" class="btn btn-success" [disabled]="addWorkflowForm.hasNoName | async">Add Workflow</button>
+            </div>
+            <div class="col-auto pl-1">
+                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">Cancel</button>
+            </div>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/workflows/workflow-add-form.component.scss b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts
index c5dcda55b..56f47c739 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts
+++ b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts
@@ -12,24 +12,8 @@ import { AddWorkflowForm, WorkflowsState } from '@app/shared';
 
 @Component({
     selector: 'sqx-workflow-add-form',
-    template: `
-        <div class="table-items-footer">
-            <form [formGroup]="addWorkflowForm.form" (ngSubmit)="addWorkflow()">
-                <div class="row no-gutters">
-                    <div class="col">
-                        <sqx-control-errors for="name" [submitted]="addWorkflowForm.submitted | async"></sqx-control-errors>
-
-                        <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter workflow name" autocomplete="off" />
-                    </div>
-                    <div class="col-auto pl-1">
-                        <button type="submit" class="btn btn-success" [disabled]="addWorkflowForm.hasNoName | async">Add Workflow</button>
-                    </div>
-                    <div class="col-auto pl-1">
-                        <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">Cancel</button>
-                    </div>
-                </div>
-            </form>
-        </div>`,
+    styleUrls: ['./workflow-add-form.component.scss'],
+    templateUrl: './workflow-add-form.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class WorkflowAddFormComponent {
diff --git a/frontend/app/features/settings/pages/workflows/workflow-step.component.html b/frontend/app/features/settings/pages/workflows/workflow-step.component.html
index f33b2d332..310c499c0 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-step.component.html
+++ b/frontend/app/features/settings/pages/workflows/workflow-step.component.html
@@ -1,7 +1,7 @@
 <div class="step">
     <div class="row no-gutters step-header">
         <div class="col-auto">
-            <button class="btn btn-initial mr-1" (click)="emitMakeInitial()"
+            <button class="btn btn-initial mr-1" (click)="makeInitial.emit()"
                 [class.enabled]="step.name !== workflow.initial && !step.isLocked"
                 [class.active]="step.name === workflow.initial"
                 [disabled]="step.name === workflow.initial || step.isLocked || disabled">
@@ -29,7 +29,7 @@
             <small class="text-decent">(Cannot be removed)</small>
         </div>
         <div class="col-auto">
-            <button type="button" class="btn btn-text-danger" (click)="emitRemove()" *ngIf="!step.isLocked && workflow.steps.length > 2" [disabled]="disabled">
+            <button type="button" class="btn btn-text-danger" (click)="remove.emit()" *ngIf="!step.isLocked && workflow.steps.length > 2" [disabled]="disabled">
                 <i class="icon-bin2"></i>
             </button>
         </div>
@@ -40,7 +40,7 @@
             [transition]="transition"
             [disabled]="disabled"
             [roles]="roles"
-            (remove)="emitTransitionRemove(transition)"
+            (remove)="transitionRemove.emit(transition)"
             (update)="changeTransition(transition, $event)">
         </sqx-workflow-transition>
 
@@ -56,7 +56,7 @@
                 </sqx-dropdown>
             </div>
             <div class="col pl-2">
-                <button class="btn btn-outline-secondary" (click)="emitTransitionAdd(openStep)">
+                <button class="btn btn-outline-secondary" (click)="transitionAdd.emit(openStep)">
                     <i class="icon-plus"></i>
                 </button>
             </div>
diff --git a/frontend/app/features/settings/pages/workflows/workflow-step.component.scss b/frontend/app/features/settings/pages/workflows/workflow-step.component.scss
index 48e11ccd5..57bdbb4e9 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-step.component.scss
+++ b/frontend/app/features/settings/pages/workflows/workflow-step.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host ::ng-deep {
     .dashed {
         @include placeholder-color($color-theme-secondary);
diff --git a/frontend/app/features/settings/pages/workflows/workflow-step.component.ts b/frontend/app/features/settings/pages/workflows/workflow-step.component.ts
index e9c38357b..bf83e7b00 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-step.component.ts
+++ b/frontend/app/features/settings/pages/workflows/workflow-step.component.ts
@@ -95,22 +95,6 @@ export class WorkflowStepComponent implements OnChanges {
         this.update.emit({ noUpdateRoles });
     }
 
-    public emitMakeInitial() {
-        this.makeInitial.emit();
-    }
-
-    public emitTransitionAdd(transition: WorkflowStep) {
-        this.transitionAdd.emit(transition);
-    }
-
-    public emitTransitionRemove(transition: WorkflowTransition) {
-        this.transitionRemove.emit(transition);
-    }
-
-    public emitRemove() {
-        this.remove.emit();
-    }
-
     public trackByTransition(index: number, transition: WorkflowTransition) {
         return transition.to;
     }
diff --git a/frontend/app/features/settings/pages/workflows/workflow-transition.component.html b/frontend/app/features/settings/pages/workflows/workflow-transition.component.html
index 8b5ef28c1..8b2163928 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-transition.component.html
+++ b/frontend/app/features/settings/pages/workflows/workflow-transition.component.html
@@ -36,7 +36,7 @@
     </div>
 
     <div class="col col-button pl-2">
-        <button type="button" class="btn btn-text-danger" (click)="emitRemove()" [disabled]="disabled">
+        <button type="button" class="btn btn-text-danger" (click)="remove.emit()" [disabled]="disabled">
             <i class="icon-bin2"></i>
         </button>
     </div>
diff --git a/frontend/app/features/settings/pages/workflows/workflow-transition.component.scss b/frontend/app/features/settings/pages/workflows/workflow-transition.component.scss
index c7f0dcea7..e95cb54fd 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-transition.component.scss
+++ b/frontend/app/features/settings/pages/workflows/workflow-transition.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .select-placeholder {
     @include absolute(0, 0, 0, 0);
     border: 1px solid transparent;
diff --git a/frontend/app/features/settings/pages/workflows/workflow-transition.component.ts b/frontend/app/features/settings/pages/workflows/workflow-transition.component.ts
index 6167acb87..fab3a4519 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-transition.component.ts
+++ b/frontend/app/features/settings/pages/workflows/workflow-transition.component.ts
@@ -44,10 +44,6 @@ export class WorkflowTransitionComponent {
         this.update.emit(({ roles: roles || [] }) as any);
     }
 
-    public emitRemove() {
-        this.remove.emit();
-    }
-
     public trackByRole(index: number, role: RoleDto) {
         return role.name;
     }
diff --git a/frontend/app/features/settings/pages/workflows/workflow.component.scss b/frontend/app/features/settings/pages/workflows/workflow.component.scss
index 94b651f0f..c33f9c527 100644
--- a/frontend/app/features/settings/pages/workflows/workflow.component.scss
+++ b/frontend/app/features/settings/pages/workflows/workflow.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .table-items-row-details {
     &::before {
         right: 4.55rem;
diff --git a/frontend/app/features/settings/pages/workflows/workflows-page.component.scss b/frontend/app/features/settings/pages/workflows/workflows-page.component.scss
index ad50cdf61..84a5172a7 100644
--- a/frontend/app/features/settings/pages/workflows/workflows-page.component.scss
+++ b/frontend/app/features/settings/pages/workflows/workflows-page.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .panel-alert {
     ul {
         margin: 0;
diff --git a/frontend/app/features/settings/settings-area.component.scss b/frontend/app/features/settings/settings-area.component.scss
index 84549cd07..aec0f6a0e 100644
--- a/frontend/app/features/settings/settings-area.component.scss
+++ b/frontend/app/features/settings/settings-area.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .nav-link {
     padding-bottom: .6rem;
     padding-top: .6rem;
diff --git a/frontend/app/framework/angular/avatar.component.html b/frontend/app/framework/angular/avatar.component.html
new file mode 100644
index 000000000..faf81dfab
--- /dev/null
+++ b/frontend/app/framework/angular/avatar.component.html
@@ -0,0 +1,5 @@
+<img *ngIf="imageSource"
+    [style.width]="imageSize"
+    [style.height]="imageSize"
+    [src]="imageSource | sqxSafeUrl"
+/>
\ No newline at end of file
diff --git a/frontend/app/framework/angular/avatar.component.scss b/frontend/app/framework/angular/avatar.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/framework/angular/avatar.component.ts b/frontend/app/framework/angular/avatar.component.ts
index 63f02bbab..13e5ffd4c 100644
--- a/frontend/app/framework/angular/avatar.component.ts
+++ b/frontend/app/framework/angular/avatar.component.ts
@@ -5,19 +5,15 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, Input, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
 import { picasso } from '@app/framework/internal';
 
 @Component({
     selector: 'sqx-avatar',
-    template: `
-        <img *ngIf="imageSource"
-            [style.width]="sizeInPx"
-            [style.height]="sizeInPx"
-            [src]="imageSource | sqxSafeUrl"
-        />
-    `
+    styleUrls: ['./avatar.component.scss'],
+    templateUrl: './avatar.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AvatarComponent implements OnChanges {
     @Input()
@@ -30,21 +26,23 @@ export class AvatarComponent implements OnChanges {
     public size = 50;
 
     public imageSource: string | null;
-    public sizeInPx: string;
+    public imageSize = '50px';
 
-    public ngOnChanges() {
-        this.imageSource = this.image || this.createSvg();
+    public ngOnChanges(changes: SimpleChanges) {
+        if (changes['image'] || changes['identifier']) {
+            this.imageSource = this.image || this.createSvg();
+        }
 
-        this.sizeInPx = `${this.size}px`;
+        if (changes['size']) {
+            this.imageSize = `${this.size}px`;
+        }
     }
 
     private createSvg() {
-        if (!this.identifier) {
+        if (this.identifier) {
+            return `data:image/svg+xml;utf8,${picasso(this.identifier)}`;
+        } else {
             return null;
         }
-
-        const svg = picasso(this.identifier);
-
-        return `data:image/svg+xml;utf8,${svg}`;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/code.component.scss b/frontend/app/framework/angular/code.component.scss
index 84af62494..dc68261f9 100644
--- a/frontend/app/framework/angular/code.component.scss
+++ b/frontend/app/framework/angular/code.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 .code {
     background: $color-code-background;
     margin: .25rem 0;
diff --git a/frontend/app/framework/angular/drag-helper.ts b/frontend/app/framework/angular/drag-helper.ts
index 5b5da47ea..fa4620fe3 100644
--- a/frontend/app/framework/angular/drag-helper.ts
+++ b/frontend/app/framework/angular/drag-helper.ts
@@ -5,6 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
+// tslint:disable: prefer-for-of
+
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 import { Types } from './../utils/types';
@@ -24,7 +26,6 @@ export function getFiles(files: FileList | ReadonlyArray<File>) {
 
     const result: File[] = [];
 
-    // tslint:disable-next-line: prefer-for-of
     for (let i = 0; i < files.length; i++) {
         result.push(files[i]);
     }
diff --git a/frontend/app/framework/angular/forms/control-errors.component.scss b/frontend/app/framework/angular/forms/control-errors.component.scss
index cb1f07fcd..bef9e52d5 100644
--- a/frontend/app/framework/angular/forms/control-errors.component.scss
+++ b/frontend/app/framework/angular/forms/control-errors.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 :host {
     @include force-width(100%);
     align-self: flex-start;
diff --git a/frontend/app/framework/angular/forms/editable-title.component.scss b/frontend/app/framework/angular/forms/editable-title.component.scss
index b59469469..9fd482411 100644
--- a/frontend/app/framework/angular/forms/editable-title.component.scss
+++ b/frontend/app/framework/angular/forms/editable-title.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .title {
     & {
         @include hover-visible('.title-edit', inline);
diff --git a/frontend/app/framework/angular/forms/autocomplete.component.html b/frontend/app/framework/angular/forms/editors/autocomplete.component.html
similarity index 100%
rename from frontend/app/framework/angular/forms/autocomplete.component.html
rename to frontend/app/framework/angular/forms/editors/autocomplete.component.html
diff --git a/frontend/app/framework/angular/forms/autocomplete.component.scss b/frontend/app/framework/angular/forms/editors/autocomplete.component.scss
similarity index 50%
rename from frontend/app/framework/angular/forms/autocomplete.component.scss
rename to frontend/app/framework/angular/forms/editors/autocomplete.component.scss
index 116837ee0..443b8840f 100644
--- a/frontend/app/framework/angular/forms/autocomplete.component.scss
+++ b/frontend/app/framework/angular/forms/editors/autocomplete.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 .control-dropdown {
     width: 18rem;
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/autocomplete.component.ts b/frontend/app/framework/angular/forms/editors/autocomplete.component.ts
similarity index 97%
rename from frontend/app/framework/angular/forms/autocomplete.component.ts
rename to frontend/app/framework/angular/forms/editors/autocomplete.component.ts
index f09627086..c5b2fd109 100644
--- a/frontend/app/framework/angular/forms/autocomplete.component.ts
+++ b/frontend/app/framework/angular/forms/editors/autocomplete.component.ts
@@ -35,14 +35,15 @@ interface State {
     selector: 'sqx-autocomplete',
     styleUrls: ['./autocomplete.component.scss'],
     templateUrl: './autocomplete.component.html',
-    providers: [SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR
+    ],
     animations: [
         fadeAnimation
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-// tslint:disable-next-line: readonly-array
-export class AutocompleteComponent extends StatefulControlComponent<State, any[]> implements OnInit {
+export class AutocompleteComponent extends StatefulControlComponent<State, ReadonlyArray<any>> implements OnInit {
     @Input()
     public source: AutocompleteSource;
 
diff --git a/frontend/app/framework/angular/forms/checkbox-group.component.html b/frontend/app/framework/angular/forms/editors/checkbox-group.component.html
similarity index 100%
rename from frontend/app/framework/angular/forms/checkbox-group.component.html
rename to frontend/app/framework/angular/forms/editors/checkbox-group.component.html
diff --git a/frontend/app/framework/angular/forms/checkbox-group.component.scss b/frontend/app/framework/angular/forms/editors/checkbox-group.component.scss
similarity index 80%
rename from frontend/app/framework/angular/forms/checkbox-group.component.scss
rename to frontend/app/framework/angular/forms/editors/checkbox-group.component.scss
index ae6844c67..ce04eb06c 100644
--- a/frontend/app/framework/angular/forms/checkbox-group.component.scss
+++ b/frontend/app/framework/angular/forms/editors/checkbox-group.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 .form-check {
     display: block;
     margin-bottom: .5rem;
diff --git a/frontend/app/framework/angular/forms/checkbox-group.component.ts b/frontend/app/framework/angular/forms/editors/checkbox-group.component.ts
similarity index 96%
rename from frontend/app/framework/angular/forms/checkbox-group.component.ts
rename to frontend/app/framework/angular/forms/editors/checkbox-group.component.ts
index 1e9cf369e..1434a68bf 100644
--- a/frontend/app/framework/angular/forms/checkbox-group.component.ts
+++ b/frontend/app/framework/angular/forms/editors/checkbox-group.component.ts
@@ -26,7 +26,9 @@ interface State {
     selector: 'sqx-checkbox-group',
     styleUrls: ['./checkbox-group.component.scss'],
     templateUrl: './checkbox-group.component.html',
-    providers: [SQX_CHECKBOX_GROUP_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_CHECKBOX_GROUP_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 // tslint:disable-next-line: readonly-array
diff --git a/frontend/app/framework/angular/forms/code-editor.component.html b/frontend/app/framework/angular/forms/editors/code-editor.component.html
similarity index 100%
rename from frontend/app/framework/angular/forms/code-editor.component.html
rename to frontend/app/framework/angular/forms/editors/code-editor.component.html
diff --git a/frontend/app/framework/angular/forms/code-editor.component.scss b/frontend/app/framework/angular/forms/editors/code-editor.component.scss
similarity index 92%
rename from frontend/app/framework/angular/forms/code-editor.component.scss
rename to frontend/app/framework/angular/forms/editors/code-editor.component.scss
index f8a4a578b..d2eab8fae 100644
--- a/frontend/app/framework/angular/forms/code-editor.component.scss
+++ b/frontend/app/framework/angular/forms/editors/code-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 // sass-lint:disable class-name-format
 
 :host ::ng-deep {
diff --git a/frontend/app/framework/angular/forms/code-editor.component.ts b/frontend/app/framework/angular/forms/editors/code-editor.component.ts
similarity index 97%
rename from frontend/app/framework/angular/forms/code-editor.component.ts
rename to frontend/app/framework/angular/forms/editors/code-editor.component.ts
index 677b3d216..5ea0421d1 100644
--- a/frontend/app/framework/angular/forms/code-editor.component.ts
+++ b/frontend/app/framework/angular/forms/editors/code-editor.component.ts
@@ -26,7 +26,9 @@ export const SQX_CODE_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-code-editor',
     styleUrls: ['./code-editor.component.scss'],
     templateUrl: './code-editor.component.html',
-    providers: [SQX_CODE_EDITOR_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_CODE_EDITOR_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CodeEditorComponent extends StatefulControlComponent<undefined, string> implements AfterViewInit {
diff --git a/frontend/app/framework/angular/forms/color-picker.component.html b/frontend/app/framework/angular/forms/editors/color-picker.component.html
similarity index 100%
rename from frontend/app/framework/angular/forms/color-picker.component.html
rename to frontend/app/framework/angular/forms/editors/color-picker.component.html
diff --git a/frontend/app/framework/angular/forms/color-picker.component.scss b/frontend/app/framework/angular/forms/editors/color-picker.component.scss
similarity index 91%
rename from frontend/app/framework/angular/forms/color-picker.component.scss
rename to frontend/app/framework/angular/forms/editors/color-picker.component.scss
index 16e00d4bb..d967a078c 100644
--- a/frontend/app/framework/angular/forms/color-picker.component.scss
+++ b/frontend/app/framework/angular/forms/editors/color-picker.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 :host ::ng-deep {
     .color-picker {
         & {
diff --git a/frontend/app/framework/angular/forms/color-picker.component.ts b/frontend/app/framework/angular/forms/editors/color-picker.component.ts
similarity index 97%
rename from frontend/app/framework/angular/forms/color-picker.component.ts
rename to frontend/app/framework/angular/forms/editors/color-picker.component.ts
index 8b6dc1172..8a0a30fc9 100644
--- a/frontend/app/framework/angular/forms/color-picker.component.ts
+++ b/frontend/app/framework/angular/forms/editors/color-picker.component.ts
@@ -28,7 +28,9 @@ interface State {
     selector: 'sqx-color-picker',
     styleUrls: ['./color-picker.component.scss'],
     templateUrl: './color-picker.component.html',
-    providers: [SQX_COLOR_PICKER_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_COLOR_PICKER_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ColorPickerComponent extends StatefulControlComponent<State, string> {
diff --git a/frontend/app/framework/angular/forms/date-time-editor.component.html b/frontend/app/framework/angular/forms/editors/date-time-editor.component.html
similarity index 100%
rename from frontend/app/framework/angular/forms/date-time-editor.component.html
rename to frontend/app/framework/angular/forms/editors/date-time-editor.component.html
diff --git a/frontend/app/framework/angular/forms/date-time-editor.component.scss b/frontend/app/framework/angular/forms/editors/date-time-editor.component.scss
similarity index 95%
rename from frontend/app/framework/angular/forms/date-time-editor.component.scss
rename to frontend/app/framework/angular/forms/editors/date-time-editor.component.scss
index 363464f90..5e3de2b36 100644
--- a/frontend/app/framework/angular/forms/date-time-editor.component.scss
+++ b/frontend/app/framework/angular/forms/editors/date-time-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 :host(.ng-invalid) {
     &.ng-dirty {
         .form-control {
diff --git a/frontend/app/framework/angular/forms/date-time-editor.component.ts b/frontend/app/framework/angular/forms/editors/date-time-editor.component.ts
similarity index 98%
rename from frontend/app/framework/angular/forms/date-time-editor.component.ts
rename to frontend/app/framework/angular/forms/editors/date-time-editor.component.ts
index 0070ddb2a..606bf3d4e 100644
--- a/frontend/app/framework/angular/forms/date-time-editor.component.ts
+++ b/frontend/app/framework/angular/forms/editors/date-time-editor.component.ts
@@ -29,7 +29,9 @@ const NO_EMIT = { emitEvent: false };
     selector: 'sqx-date-time-editor',
     styleUrls: ['./date-time-editor.component.scss'],
     templateUrl: './date-time-editor.component.html',
-    providers: [SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DateTimeEditorComponent extends StatefulControlComponent<{}, string | null> implements OnInit, AfterViewInit {
diff --git a/frontend/app/framework/angular/forms/dropdown.component.html b/frontend/app/framework/angular/forms/editors/dropdown.component.html
similarity index 100%
rename from frontend/app/framework/angular/forms/dropdown.component.html
rename to frontend/app/framework/angular/forms/editors/dropdown.component.html
diff --git a/frontend/app/framework/angular/forms/dropdown.component.scss b/frontend/app/framework/angular/forms/editors/dropdown.component.scss
similarity index 96%
rename from frontend/app/framework/angular/forms/dropdown.component.scss
rename to frontend/app/framework/angular/forms/editors/dropdown.component.scss
index 3727e203c..14b32416f 100644
--- a/frontend/app/framework/angular/forms/dropdown.component.scss
+++ b/frontend/app/framework/angular/forms/editors/dropdown.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 $color-input-disabled: #eef1f4;
 
 .form-control {
diff --git a/frontend/app/framework/angular/forms/dropdown.component.ts b/frontend/app/framework/angular/forms/editors/dropdown.component.ts
similarity index 96%
rename from frontend/app/framework/angular/forms/dropdown.component.ts
rename to frontend/app/framework/angular/forms/editors/dropdown.component.ts
index 88f7f8b2c..59ea990f0 100644
--- a/frontend/app/framework/angular/forms/dropdown.component.ts
+++ b/frontend/app/framework/angular/forms/editors/dropdown.component.ts
@@ -31,11 +31,12 @@ interface State {
     selector: 'sqx-dropdown',
     styleUrls: ['./dropdown.component.scss'],
     templateUrl: './dropdown.component.html',
-    providers: [SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-// tslint:disable-next-line: readonly-array
-export class DropdownComponent extends StatefulControlComponent<State, any[]> implements AfterContentInit, ControlValueAccessor, OnChanges, OnInit {
+export class DropdownComponent extends StatefulControlComponent<State, ReadonlyArray<any>> implements AfterContentInit, ControlValueAccessor, OnChanges, OnInit {
     @Input()
     public items: ReadonlyArray<any> = [];
 
diff --git a/frontend/app/framework/angular/forms/iframe-editor.component.html b/frontend/app/framework/angular/forms/editors/iframe-editor.component.html
similarity index 100%
rename from frontend/app/framework/angular/forms/iframe-editor.component.html
rename to frontend/app/framework/angular/forms/editors/iframe-editor.component.html
diff --git a/frontend/app/framework/angular/forms/iframe-editor.component.scss b/frontend/app/framework/angular/forms/editors/iframe-editor.component.scss
similarity index 63%
rename from frontend/app/framework/angular/forms/iframe-editor.component.scss
rename to frontend/app/framework/angular/forms/editors/iframe-editor.component.scss
index e3678801d..ae2678456 100644
--- a/frontend/app/framework/angular/forms/iframe-editor.component.scss
+++ b/frontend/app/framework/angular/forms/editors/iframe-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 iframe {
     background: 0;
     border: 0;
diff --git a/frontend/app/framework/angular/forms/iframe-editor.component.ts b/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
similarity index 96%
rename from frontend/app/framework/angular/forms/iframe-editor.component.ts
rename to frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
index a57b51651..7c6a8d518 100644
--- a/frontend/app/framework/angular/forms/iframe-editor.component.ts
+++ b/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
@@ -18,7 +18,9 @@ export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-iframe-editor',
     styleUrls: ['./iframe-editor.component.scss'],
     templateUrl: './iframe-editor.component.html',
-    providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class IFrameEditorComponent extends StatefulControlComponent<any, any> implements OnChanges, AfterViewInit {
@@ -82,7 +84,7 @@ export class IFrameEditorComponent extends StatefulControlComponent<any, any> im
                     } else if (type === 'valueChanged') {
                         const { value } = event.data;
 
-                        if (!Types.jsJsonEquals(this.value, value)) {
+                        if (!Types.equals(this.value, value)) {
                             this.value = value;
 
                             this.callChange(value);
diff --git a/frontend/app/framework/angular/forms/json-editor.component.html b/frontend/app/framework/angular/forms/editors/json-editor.component.html
similarity index 100%
rename from frontend/app/framework/angular/forms/json-editor.component.html
rename to frontend/app/framework/angular/forms/editors/json-editor.component.html
diff --git a/frontend/app/framework/angular/forms/json-editor.component.scss b/frontend/app/framework/angular/forms/editors/json-editor.component.scss
similarity index 92%
rename from frontend/app/framework/angular/forms/json-editor.component.scss
rename to frontend/app/framework/angular/forms/editors/json-editor.component.scss
index f0c225b44..56197ee78 100644
--- a/frontend/app/framework/angular/forms/json-editor.component.scss
+++ b/frontend/app/framework/angular/forms/editors/json-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 // sass-lint:disable class-name-format
 
 $editor-height: 30rem;
diff --git a/frontend/app/framework/angular/forms/json-editor.component.ts b/frontend/app/framework/angular/forms/editors/json-editor.component.ts
similarity index 98%
rename from frontend/app/framework/angular/forms/json-editor.component.ts
rename to frontend/app/framework/angular/forms/editors/json-editor.component.ts
index 4c9f301f0..fc3b6623d 100644
--- a/frontend/app/framework/angular/forms/json-editor.component.ts
+++ b/frontend/app/framework/angular/forms/editors/json-editor.component.ts
@@ -22,7 +22,9 @@ export const SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-json-editor',
     styleUrls: ['./json-editor.component.scss'],
     templateUrl: './json-editor.component.html',
-    providers: [SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class JsonEditorComponent extends StatefulControlComponent<{}, string> implements AfterViewInit {
diff --git a/frontend/app/framework/angular/forms/stars.component.html b/frontend/app/framework/angular/forms/editors/stars.component.html
similarity index 100%
rename from frontend/app/framework/angular/forms/stars.component.html
rename to frontend/app/framework/angular/forms/editors/stars.component.html
diff --git a/frontend/app/framework/angular/forms/stars.component.scss b/frontend/app/framework/angular/forms/editors/stars.component.scss
similarity index 93%
rename from frontend/app/framework/angular/forms/stars.component.scss
rename to frontend/app/framework/angular/forms/editors/stars.component.scss
index 557ae22af..d4a11f50d 100644
--- a/frontend/app/framework/angular/forms/stars.component.scss
+++ b/frontend/app/framework/angular/forms/editors/stars.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 $color-gold: #ffd700;
 
 .many-stars {
diff --git a/frontend/app/framework/angular/forms/stars.component.ts b/frontend/app/framework/angular/forms/editors/stars.component.ts
similarity index 97%
rename from frontend/app/framework/angular/forms/stars.component.ts
rename to frontend/app/framework/angular/forms/editors/stars.component.ts
index b55d42ef4..a52f98102 100644
--- a/frontend/app/framework/angular/forms/stars.component.ts
+++ b/frontend/app/framework/angular/forms/editors/stars.component.ts
@@ -25,7 +25,9 @@ interface State {
     selector: 'sqx-stars',
     styleUrls: ['./stars.component.scss'],
     templateUrl: './stars.component.html',
-    providers: [SQX_STARS_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_STARS_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StarsComponent extends StatefulControlComponent<State, number | null> {
diff --git a/frontend/app/framework/angular/forms/tag-editor.component.html b/frontend/app/framework/angular/forms/editors/tag-editor.component.html
similarity index 100%
rename from frontend/app/framework/angular/forms/tag-editor.component.html
rename to frontend/app/framework/angular/forms/editors/tag-editor.component.html
diff --git a/frontend/app/framework/angular/forms/tag-editor.component.scss b/frontend/app/framework/angular/forms/editors/tag-editor.component.scss
similarity index 98%
rename from frontend/app/framework/angular/forms/tag-editor.component.scss
rename to frontend/app/framework/angular/forms/editors/tag-editor.component.scss
index 8aa3f205b..02bcfb98f 100644
--- a/frontend/app/framework/angular/forms/tag-editor.component.scss
+++ b/frontend/app/framework/angular/forms/editors/tag-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 $focus-color: #b3d3ff;
 $focus-shadow: rgba(51, 137, 255, .25);
 
diff --git a/frontend/app/framework/angular/forms/tag-editor.component.ts b/frontend/app/framework/angular/forms/editors/tag-editor.component.ts
similarity index 98%
rename from frontend/app/framework/angular/forms/tag-editor.component.ts
rename to frontend/app/framework/angular/forms/editors/tag-editor.component.ts
index 09d97b40a..6d034ee10 100644
--- a/frontend/app/framework/angular/forms/tag-editor.component.ts
+++ b/frontend/app/framework/angular/forms/editors/tag-editor.component.ts
@@ -138,14 +138,15 @@ interface State {
     selector: 'sqx-tag-editor',
     styleUrls: ['./tag-editor.component.scss'],
     templateUrl: './tag-editor.component.html',
-    providers: [SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR
+    ],
     animations: [
         fadeAnimation
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-// tslint:disable-next-line: readonly-array
-export class TagEditorComponent extends StatefulControlComponent<State, any[]> implements AfterViewInit, OnChanges, OnInit {
+export class TagEditorComponent extends StatefulControlComponent<State, ReadonlyArray<any>> implements AfterViewInit, OnChanges, OnInit {
     private latestValue: any;
 
     @ViewChild('form', { static: false })
diff --git a/frontend/app/framework/angular/forms/toggle.component.html b/frontend/app/framework/angular/forms/editors/toggle.component.html
similarity index 100%
rename from frontend/app/framework/angular/forms/toggle.component.html
rename to frontend/app/framework/angular/forms/editors/toggle.component.html
diff --git a/frontend/app/framework/angular/forms/toggle.component.scss b/frontend/app/framework/angular/forms/editors/toggle.component.scss
similarity index 97%
rename from frontend/app/framework/angular/forms/toggle.component.scss
rename to frontend/app/framework/angular/forms/editors/toggle.component.scss
index 1af4cb40a..c626b8ebe 100644
--- a/frontend/app/framework/angular/forms/toggle.component.scss
+++ b/frontend/app/framework/angular/forms/editors/toggle.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 $toggle-width: 2.2rem;
 $toggle-height: 1.25rem;
 $toggle-button-size: $toggle-height - .25rem;
diff --git a/frontend/app/framework/angular/forms/toggle.component.ts b/frontend/app/framework/angular/forms/editors/toggle.component.ts
similarity index 96%
rename from frontend/app/framework/angular/forms/toggle.component.ts
rename to frontend/app/framework/angular/forms/editors/toggle.component.ts
index 33e53d9bf..338665c76 100644
--- a/frontend/app/framework/angular/forms/toggle.component.ts
+++ b/frontend/app/framework/angular/forms/editors/toggle.component.ts
@@ -22,7 +22,9 @@ interface State {
     selector: 'sqx-toggle',
     styleUrls: ['./toggle.component.scss'],
     templateUrl: './toggle.component.html',
-    providers: [SQX_TOGGLE_CONTROL_VALUE_ACCESSOR]
+    providers: [
+        SQX_TOGGLE_CONTROL_VALUE_ACCESSOR
+    ]
 })
 export class ToggleComponent extends StatefulControlComponent<State, boolean | null> {
     @Input()
diff --git a/frontend/app/framework/angular/forms/form-alert.component.html b/frontend/app/framework/angular/forms/form-alert.component.html
new file mode 100644
index 000000000..b8ad2ef50
--- /dev/null
+++ b/frontend/app/framework/angular/forms/form-alert.component.html
@@ -0,0 +1,3 @@
+<div class="alert alert-hint mt-{{marginTop}} mb-{{marginBottom}} {{class}}" [class.light]="light">
+    <i class="icon-info-outline"></i> <ng-content></ng-content>
+</div>
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/form-alert.component.scss b/frontend/app/framework/angular/forms/form-alert.component.scss
new file mode 100644
index 000000000..71d37f104
--- /dev/null
+++ b/frontend/app/framework/angular/forms/form-alert.component.scss
@@ -0,0 +1,11 @@
+$color: #fcfeff;
+
+:host {
+    display: block;
+    max-width: 100%;
+    min-width: 100%;
+}
+
+.light {
+    background: $color;
+}
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/form-alert.component.ts b/frontend/app/framework/angular/forms/form-alert.component.ts
index 4187c60a9..e9dc53386 100644
--- a/frontend/app/framework/angular/forms/form-alert.component.ts
+++ b/frontend/app/framework/angular/forms/form-alert.component.ts
@@ -9,22 +9,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 @Component({
     selector: 'sqx-form-alert',
-    template: `
-        <div class="alert alert-hint mt-{{marginTop}} mb-{{marginBottom}} {{class}}" [class.light]="light">
-            <i class="icon-info-outline"></i> <ng-content></ng-content>
-        </div>
-    `,
-    styles: [`
-        :host {
-            display: block;
-            min-width: 100%;
-            max-width: 100%;
-        }
-
-        .light {
-            background: #fcfeff;
-        }
-    `],
+    styleUrls: ['./form-alert.component.scss'],
+    templateUrl: './form-alert.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FormAlertComponent {
diff --git a/frontend/app/framework/angular/forms/form-error.component.html b/frontend/app/framework/angular/forms/form-error.component.html
new file mode 100644
index 000000000..0c73a2a81
--- /dev/null
+++ b/frontend/app/framework/angular/forms/form-error.component.html
@@ -0,0 +1,10 @@
+<ng-container *ngIf="show">
+    <div [class.form-bubble]="bubble">
+        <div class="form-alert form-alert-error" [class.closeable]="closeable">
+            <a class="form-alert-close" (click)="close()">
+                <i class="icon-close"></i>
+            </a>
+            <div [innerHTML]="error?.displayMessage | sqxMarkdown"></div>
+        </div>
+    </div>
+</ng-container>
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/form-error.component.scss b/frontend/app/framework/angular/forms/form-error.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/framework/angular/forms/form-error.component.ts b/frontend/app/framework/angular/forms/form-error.component.ts
index bf2b1bd37..56c7b9ba8 100644
--- a/frontend/app/framework/angular/forms/form-error.component.ts
+++ b/frontend/app/framework/angular/forms/form-error.component.ts
@@ -11,18 +11,8 @@ import { ErrorDto } from '@app/framework/internal';
 
 @Component({
     selector: 'sqx-form-error',
-    template: `
-        <ng-container *ngIf="show">
-            <div [class.form-bubble]="bubble">
-                <div class="form-alert form-alert-error" [class.closeable]="closeable">
-                    <a class="form-alert-close" (click)="close()">
-                        <i class="icon-close"></i>
-                    </a>
-                    <div [innerHTML]="error?.displayMessage | sqxMarkdown"></div>
-                </div>
-            </div>
-        </ng-container>
-    `,
+    styleUrls: ['./form-error.component.scss'],
+    templateUrl: './form-error.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FormErrorComponent implements OnChanges {
diff --git a/frontend/app/framework/angular/forms/form-hint.component.html b/frontend/app/framework/angular/forms/form-hint.component.html
new file mode 100644
index 000000000..fd80720df
--- /dev/null
+++ b/frontend/app/framework/angular/forms/form-hint.component.html
@@ -0,0 +1,3 @@
+<small class="text-muted form-text mt-{{marginTop}} mb-{{marginBottom}} {{class}}">
+    <ng-content></ng-content>
+</small>
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/form-hint.component.scss b/frontend/app/framework/angular/forms/form-hint.component.scss
new file mode 100644
index 000000000..0d5449b5b
--- /dev/null
+++ b/frontend/app/framework/angular/forms/form-hint.component.scss
@@ -0,0 +1,11 @@
+:host {
+    & {
+        display: block;
+        margin-bottom: .5rem;
+        margin-top: 0;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/form-hint.component.ts b/frontend/app/framework/angular/forms/form-hint.component.ts
index 0decb7870..c82d2ef2e 100644
--- a/frontend/app/framework/angular/forms/form-hint.component.ts
+++ b/frontend/app/framework/angular/forms/form-hint.component.ts
@@ -9,22 +9,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 @Component({
     selector: 'sqx-form-hint',
-    template: `
-        <small class="text-muted form-text mt-{{marginTop}} mb-{{marginBottom}} {{class}}">
-            <ng-content></ng-content>
-        </small>
-    `,
-    styles: [`
-        :host {
-            display: block;
-            margin-top: 0;
-            margin-bottom: .5rem
-        }
-
-        :host::last-child {
-            margin-bottom: 0;
-        }`
-    ],
+    styleUrls: ['./form-hint.component.scss'],
+    templateUrl: './form-hint.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FormHintComponent {
diff --git a/frontend/app/framework/angular/forms/indeterminate-value.directive.ts b/frontend/app/framework/angular/forms/indeterminate-value.directive.ts
index 5bcf73c68..e6017136e 100644
--- a/frontend/app/framework/angular/forms/indeterminate-value.directive.ts
+++ b/frontend/app/framework/angular/forms/indeterminate-value.directive.ts
@@ -16,7 +16,9 @@ export const SQX_INDETERMINATE_VALUE_CONTROL_VALUE_ACCESSOR: any = {
 
 @Directive({
     selector: '[sqxIndeterminateValue]',
-    providers: [SQX_INDETERMINATE_VALUE_CONTROL_VALUE_ACCESSOR]
+    providers: [
+        SQX_INDETERMINATE_VALUE_CONTROL_VALUE_ACCESSOR
+    ]
 })
 export class IndeterminateValueDirective implements ControlValueAccessor {
     private callChange = (v: any) => { /* NOOP */ };
diff --git a/frontend/app/framework/angular/forms/transform-input.directive.ts b/frontend/app/framework/angular/forms/transform-input.directive.ts
index 44fded675..490e6a9c9 100644
--- a/frontend/app/framework/angular/forms/transform-input.directive.ts
+++ b/frontend/app/framework/angular/forms/transform-input.directive.ts
@@ -26,7 +26,9 @@ export const SQX_TRANSFORM_INPUT_VALUE_ACCESSOR: any = {
 
 @Directive({
     selector: '[sqxTransformInput]',
-    providers: [SQX_TRANSFORM_INPUT_VALUE_ACCESSOR]
+    providers: [
+        SQX_TRANSFORM_INPUT_VALUE_ACCESSOR
+    ]
 })
 export class TransformInputDirective implements ControlValueAccessor {
     private callChange = (v: any) => { /* NOOP */ };
diff --git a/frontend/app/framework/angular/list-view.component.scss b/frontend/app/framework/angular/list-view.component.scss
index 2766c5663..933f46a9a 100644
--- a/frontend/app/framework/angular/list-view.component.scss
+++ b/frontend/app/framework/angular/list-view.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 :host {
     display: flex;
     flex-direction: column;
diff --git a/frontend/app/framework/angular/modals/dialog-renderer.component.scss b/frontend/app/framework/angular/modals/dialog-renderer.component.scss
index c486e537c..2f91d7375 100644
--- a/frontend/app/framework/angular/modals/dialog-renderer.component.scss
+++ b/frontend/app/framework/angular/modals/dialog-renderer.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 // sass-lint:disable single-line-per-selector
 
 .notification-container {
diff --git a/frontend/app/framework/angular/modals/modal-dialog.component.html b/frontend/app/framework/angular/modals/modal-dialog.component.html
index 0e24d5628..0bc4c40ad 100644
--- a/frontend/app/framework/angular/modals/modal-dialog.component.html
+++ b/frontend/app/framework/angular/modals/modal-dialog.component.html
@@ -1,12 +1,12 @@
 <div class="modal" @fade>
-    <div class="modal-dialog" [class.modal-lg]="large" [class.modal-fh]="fullHeight">
+    <div class="modal-dialog modal-{{size}}" [class.modal-fh]="fullHeight">
         <div class="modal-content">
             <div class="modal-header" *ngIf="showHeader">
                 <h4 class="modal-title">
                     <ng-content select="[title]"></ng-content>
                 </h4>
 
-                <button type="button" class="close" (click)="emitClose()">
+                <button type="button" class="close" (click)="close.emit()">
                     <i class="icon-close"></i>
                 </button>
             </div>
@@ -28,4 +28,4 @@
     </div>
 </div>
 
-<sqx-shortcut keys="escape" (trigger)="emitClose()"></sqx-shortcut>
\ No newline at end of file
+<sqx-shortcut keys="escape" (trigger)="close.emit()"></sqx-shortcut>
\ No newline at end of file
diff --git a/frontend/app/framework/angular/modals/modal-dialog.component.scss b/frontend/app/framework/angular/modals/modal-dialog.component.scss
index b0c4a1e0f..fd6e87b78 100644
--- a/frontend/app/framework/angular/modals/modal-dialog.component.scss
+++ b/frontend/app/framework/angular/modals/modal-dialog.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 .modal {
     display: block;
 }
diff --git a/frontend/app/framework/angular/modals/modal-dialog.component.ts b/frontend/app/framework/angular/modals/modal-dialog.component.ts
index eaa3411fb..8093e4f08 100644
--- a/frontend/app/framework/angular/modals/modal-dialog.component.ts
+++ b/frontend/app/framework/angular/modals/modal-dialog.component.ts
@@ -35,7 +35,7 @@ export class ModalDialogComponent implements AfterViewInit {
     public showTabs = true;
 
     @Input()
-    public large = false;
+    public size: 'sm' | 'md' | 'lg' | 'xl' = 'md';
 
     @Input()
     public flexBody = false;
@@ -78,8 +78,4 @@ export class ModalDialogComponent implements AfterViewInit {
             }
         }
     }
-
-    public emitClose() {
-        this.close.emit();
-    }
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/modals/onboarding-tooltip.component.scss b/frontend/app/framework/angular/modals/onboarding-tooltip.component.scss
index f29416548..13f9381e0 100644
--- a/frontend/app/framework/angular/modals/onboarding-tooltip.component.scss
+++ b/frontend/app/framework/angular/modals/onboarding-tooltip.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 $hide-shadow: rgba(0, 0, 0, .5);
 
 .onboarding {
diff --git a/frontend/app/framework/angular/modals/root-view.component.html b/frontend/app/framework/angular/modals/root-view.component.html
new file mode 100644
index 000000000..56146ad9f
--- /dev/null
+++ b/frontend/app/framework/angular/modals/root-view.component.html
@@ -0,0 +1,3 @@
+<div #element></div>
+
+<ng-content></ng-content>
\ No newline at end of file
diff --git a/frontend/app/framework/angular/modals/root-view.component.scss b/frontend/app/framework/angular/modals/root-view.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/framework/angular/modals/root-view.component.ts b/frontend/app/framework/angular/modals/root-view.component.ts
index 6f306d703..5a53a9d79 100644
--- a/frontend/app/framework/angular/modals/root-view.component.ts
+++ b/frontend/app/framework/angular/modals/root-view.component.ts
@@ -9,11 +9,8 @@ import { ChangeDetectionStrategy, Component, ViewChild, ViewContainerRef } from
 
 @Component({
     selector: 'sqx-root-view',
-    template: `
-        <div #element></div>
-
-        <ng-content></ng-content>
-    `,
+    styleUrls: ['./root-view.component.scss'],
+    templateUrl: './root-view.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RootViewComponent {
diff --git a/frontend/app/framework/angular/pager.component.scss b/frontend/app/framework/angular/pager.component.scss
index e891b9183..af496b3dc 100644
--- a/frontend/app/framework/angular/pager.component.scss
+++ b/frontend/app/framework/angular/pager.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 .form-control {
     display: inline-block;
     margin-right: 2rem;
diff --git a/frontend/app/framework/angular/panel.component.html b/frontend/app/framework/angular/panel.component.html
index 7e5eebb42..74df578eb 100644
--- a/frontend/app/framework/angular/panel.component.html
+++ b/frontend/app/framework/angular/panel.component.html
@@ -18,7 +18,7 @@
 
             <ng-container *ngIf="showClose">
                 <ng-container *ngIf="customClose; else defaultClose">
-                    <a class="panel-close" (click)="emitClose()">
+                    <a class="panel-close" (click)="close.emit()">
                         <i class="icon-close"></i>
                     </a>
                 </ng-container>
diff --git a/frontend/app/framework/angular/panel.component.scss b/frontend/app/framework/angular/panel.component.scss
index 83949a038..acc0e5f5f 100644
--- a/frontend/app/framework/angular/panel.component.scss
+++ b/frontend/app/framework/angular/panel.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 .no-padding {
     padding: 0;
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/panel.component.ts b/frontend/app/framework/angular/panel.component.ts
index ed62f38dc..94a9b3e32 100644
--- a/frontend/app/framework/angular/panel.component.ts
+++ b/frontend/app/framework/angular/panel.component.ts
@@ -143,8 +143,4 @@ export class PanelComponent implements AfterViewInit, OnChanges, OnDestroy, OnIn
             }
         }
     }
-
-    public emitClose() {
-        this.close.emit();
-    }
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/status-icon.component.scss b/frontend/app/framework/angular/status-icon.component.scss
index 25c837688..5aa11ffc4 100644
--- a/frontend/app/framework/angular/status-icon.component.scss
+++ b/frontend/app/framework/angular/status-icon.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 $circle-size-sm: 1.6rem;
 
 $circle-size-lg: 2.8rem;
diff --git a/frontend/app/framework/declarations.ts b/frontend/app/framework/declarations.ts
index a9518ced4..f53416572 100644
--- a/frontend/app/framework/declarations.ts
+++ b/frontend/app/framework/declarations.ts
@@ -5,29 +5,30 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-export * from './angular/forms/autocomplete.component';
-export * from './angular/forms/checkbox-group.component';
-export * from './angular/forms/code-editor.component';
-export * from './angular/forms/color-picker.component';
+export * from './angular/forms/editable-title.component';
+export * from './angular/forms/editors/autocomplete.component';
+export * from './angular/forms/editors/checkbox-group.component';
+export * from './angular/forms/editors/code-editor.component';
+export * from './angular/forms/editors/color-picker.component';
+export * from './angular/forms/editors/date-time-editor.component';
+export * from './angular/forms/editors/dropdown.component';
+export * from './angular/forms/editors/iframe-editor.component';
+export * from './angular/forms/editors/json-editor.component';
+export * from './angular/forms/editors/stars.component';
+export * from './angular/forms/editors/tag-editor.component';
+export * from './angular/forms/editors/toggle.component';
+
 export * from './angular/forms/confirm-click.directive';
 export * from './angular/forms/control-errors.component';
 export * from './angular/forms/copy.directive';
-export * from './angular/forms/date-time-editor.component';
-export * from './angular/forms/dropdown.component';
-export * from './angular/forms/editable-title.component';
 export * from './angular/forms/file-drop.directive';
 export * from './angular/forms/focus-on-init.directive';
 export * from './angular/forms/form-alert.component';
 export * from './angular/forms/form-error.component';
 export * from './angular/forms/form-hint.component';
 export * from './angular/forms/forms-helper';
-export * from './angular/forms/iframe-editor.component';
 export * from './angular/forms/indeterminate-value.directive';
-export * from './angular/forms/json-editor.component';
 export * from './angular/forms/progress-bar.component';
-export * from './angular/forms/stars.component';
-export * from './angular/forms/tag-editor.component';
-export * from './angular/forms/toggle.component';
 export * from './angular/forms/transform-input.directive';
 export * from './angular/forms/validators';
 
diff --git a/frontend/app/framework/services/analytics.service.ts b/frontend/app/framework/services/analytics.service.ts
index 9bf3183c1..227898c06 100644
--- a/frontend/app/framework/services/analytics.service.ts
+++ b/frontend/app/framework/services/analytics.service.ts
@@ -5,6 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
+// tslint:disable:only-arrow-functions
+
 import { Injectable } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter } from 'rxjs/operators';
@@ -13,8 +15,6 @@ import { AnalyticsIdConfig } from './../configurations';
 import { Types } from './../utils/types';
 import { ResourceLoaderService } from './resource-loader.service';
 
-// tslint:disable:only-arrow-functions
-
 export const AnalyticsServiceFactory = (analyticsId: AnalyticsIdConfig, router: Router, resourceLoader: ResourceLoaderService) => {
     return new AnalyticsService(analyticsId, router, resourceLoader);
 };
diff --git a/frontend/app/framework/services/resource-loader.service.ts b/frontend/app/framework/services/resource-loader.service.ts
index 601ef18e5..1b0e94509 100644
--- a/frontend/app/framework/services/resource-loader.service.ts
+++ b/frontend/app/framework/services/resource-loader.service.ts
@@ -44,13 +44,14 @@ export class ResourceLoaderService {
         let result = this.cache[key];
 
         if (!result) {
-            result = new Promise((resolve, reject) => {
-                const script = this.renderer.createElement('script');
+            const script = this.renderer.createElement('script');
+
+            this.renderer.setProperty(script, 'src', url);
+            this.renderer.setProperty(script, 'async', false);
+            this.renderer.appendChild(document.body, script);
 
+            result = new Promise((resolve) => {
                 this.renderer.listen(script, 'load', () => resolve());
-                this.renderer.setProperty(script, 'src', url);
-                this.renderer.setProperty(script, 'async', true);
-                this.renderer.appendChild(document.body, script);
             });
 
             this.cache[key] = result;
diff --git a/frontend/app/framework/utils/array-extensions.ts b/frontend/app/framework/utils/array-extensions.ts
index 7033e1d83..91d81aa70 100644
--- a/frontend/app/framework/utils/array-extensions.ts
+++ b/frontend/app/framework/utils/array-extensions.ts
@@ -1,4 +1,3 @@
-
 /*
  * Squidex Headless CMS
  *
diff --git a/frontend/app/framework/utils/hateos.ts b/frontend/app/framework/utils/hateos.ts
index 9bc67ac10..09578404f 100644
--- a/frontend/app/framework/utils/hateos.ts
+++ b/frontend/app/framework/utils/hateos.ts
@@ -1,4 +1,3 @@
-
 /*
  * Squidex Headless CMS
  *
diff --git a/frontend/app/framework/utils/picasso.ts b/frontend/app/framework/utils/picasso.ts
index 3bf9ecb7d..d3e444995 100644
--- a/frontend/app/framework/utils/picasso.ts
+++ b/frontend/app/framework/utils/picasso.ts
@@ -1,4 +1,11 @@
-import MersenneTwister from 'mersenne-twister';
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+ import MersenneTwister from 'mersenne-twister';
 
 const ALL_COLORS: ReadonlyArray<string> = [
     'rgb(226,27,12)',
diff --git a/frontend/app/framework/utils/types.spec.ts b/frontend/app/framework/utils/types.spec.ts
index eeeef1153..fdd2edf34 100644
--- a/frontend/app/framework/utils/types.spec.ts
+++ b/frontend/app/framework/utils/types.spec.ts
@@ -5,16 +5,9 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { mergeInto, Types } from './types';
+import { Types } from './types';
 
 describe('Types', () => {
-    it('should calculate hash string', () => {
-        expect(Types.hash(null)).toBe('null');
-        expect(Types.hash(undefined)).toBeUndefined();
-
-        expect(Types.hash(new RegExp('.*'))).toEqual('{}');
-    });
-
     it('should make string check', () => {
         expect(Types.isString('')).toBeTruthy();
         expect(Types.isString('string')).toBeTruthy();
@@ -103,12 +96,6 @@ describe('Types', () => {
         expect(Types.is(1, MyClass)).toBeFalsy();
     });
 
-    it('should make json equals check', () => {
-        expect(Types.jsJsonEquals({ a: 1, b: 2 }, { a: 1, b: 2 })).toBeTruthy();
-
-        expect(Types.jsJsonEquals({ a: 1, b: 2 }, { b: 2, a: 1 })).toBeFalsy();
-    });
-
     it('should not treat zero as empty', () => {
         expect(Types.isEmpty(0)).toBeFalsy();
     });
@@ -153,10 +140,83 @@ describe('Types', () => {
         expect(Types.isEmpty({ a: null, b: null })).toBeTruthy();
     });
 
+    it('should compare undefined', () => {
+        expect(Types.equals(undefined, undefined)).toBeTruthy();
+    });
+
+    it('should compare null', () => {
+        expect(Types.equals(null, null)).toBeTruthy();
+    });
+
+    it('should compare invalid', () => {
+        expect(Types.equals(null, undefined)).toBeFalsy();
+    });
+
+    it('should compare scalars', () => {
+        expect(Types.equals(1, false)).toBeFalsy();
+        expect(Types.equals(1, 2)).toBeFalsy();
+        expect(Types.equals(2, 2)).toBeTruthy();
+    });
+
+    it('should compare arrays', () => {
+        expect(Types.equals([1, 2], [2, 3])).toBeFalsy();
+        expect(Types.equals([1, 2], [1, 2])).toBeTruthy();
+    });
+
+    it('should compare objects', () => {
+        expect(Types.equals({ a: 1, b: 2 }, { a: 2, b: 3 })).toBeFalsy();
+        expect(Types.equals({ a: 1, b: 2 }, { a: 1, b: 2 })).toBeTruthy();
+    });
+
+    it('should compare nested objects', () => {
+        expect(Types.equals({ a: [1, 2] }, { a: [2, 3] })).toBeFalsy();
+        expect(Types.equals({ a: [1, 2] }, { a: [1, 2] })).toBeTruthy();
+    });
+
+    it('should clone array', () => {
+        const source = [1, 2, 3];
+        const result = Types.clone(source);
+
+        expect(result).toEqual(source);
+        expect(result).not.toBe(source);
+    });
+
+    it('should compare arrays', () => {
+        const source = 13;
+        const result = Types.clone(source);
+
+        expect(result).toEqual(source);
+    });
+
+    it('should clone value', () => {
+        const source = 13;
+        const result = Types.clone(source);
+
+        expect(result).toEqual(source);
+    });
+
+    it('should clone object', () => {
+        const source = { a: 1, b: 2 };
+        const result = Types.clone(source);
+
+        expect(result).toEqual(source);
+        expect(result).not.toBe(source);
+    });
+
+    it('should clone object of array', () => {
+        const source = { a: [1, 2], b: [3, 4] };
+        const result = Types.clone(source);
+
+        expect(result).toEqual(source);
+        expect(result).not.toBe(source);
+        expect(result.a).not.toBe(source.a);
+        expect(result.b).not.toBe(source.b);
+    });
+
     it('should merge deeply', () => {
         const source = {};
 
-        mergeInto(source, {
+        Types.mergeInto(source, {
             rootShared: 1,
             rootA: 2,
             nested: {
@@ -165,7 +225,7 @@ describe('Types', () => {
             array: [4]
         });
 
-        mergeInto(source, {
+        Types.mergeInto(source, {
             rootShared: 5,
             rootB: 6,
             nested: {
diff --git a/frontend/app/framework/utils/types.ts b/frontend/app/framework/utils/types.ts
index 090514083..5c40b4e35 100644
--- a/frontend/app/framework/utils/types.ts
+++ b/frontend/app/framework/utils/types.ts
@@ -8,14 +8,6 @@
 // tslint:disable: readonly-array
 
 export module Types {
-    export function hash(value: any): string {
-        try {
-            return JSON.stringify(value);
-        } catch (e) {
-            return '';
-        }
-    }
-
     export function isString(value: any): value is string {
         return typeof value === 'string' || value instanceof String;
     }
@@ -82,28 +74,6 @@ export module Types {
         return true;
     }
 
-    export function jsJsonEquals<T>(lhs: T, rhs: T) {
-        return hash(lhs) === hash(rhs);
-    }
-
-    export function isEquals<T>(lhs: ReadonlyArray<T>, rhs: ReadonlyArray<T>) {
-        if (!lhs && !rhs) {
-            return true;
-        }
-
-        if (lhs.length !== rhs.length) {
-            return false;
-        }
-
-        for (let i = 0; i < lhs.length; i++) {
-            if (rhs[i] !== lhs[i]) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-
     export function isEmpty(value: any): boolean {
         if (Types.isArray(value)) {
             for (const v of value) {
@@ -129,25 +99,91 @@ export module Types {
 
         return Types.isUndefined(value) === true || Types.isNull(value) === true;
     }
-}
 
-export function mergeInto(target: object, source: object) {
-    if (!Types.isObject(target) || !Types.isObject(source)) {
-        return source;
+    export function clone<T>(lhs: T): T {
+        const any: any = lhs;
+
+        if (Types.isArray(lhs)) {
+            const result = [];
+
+            for (let i = 0; i < lhs.length; i++) {
+                result[i] = clone(lhs[i]);
+            }
+
+            return result as any;
+        } else if (Types.isObject(lhs)) {
+            const result = {};
+
+            for (let key in any) {
+                if (any.hasOwnProperty(key)) {
+                    result[key] = clone(lhs[key]);
+                }
+            }
+
+            return result as any;
+        }
+
+        return lhs;
     }
 
-    Object.keys(source).forEach(key => {
-        const targetValue = target[key];
-        const sourceValue = source[key];
+    export function equals(lhs: any, rhs: any) {
+        if (lhs === rhs || (lhs !== lhs && rhs !== rhs)) {
+            return true;
+        }
+
+        if (!lhs || !rhs) {
+            return false;
+        }
+
+        if (Types.isArray(lhs) && Types.isArray(rhs)) {
+            if (lhs.length !== rhs.length) {
+                return false;
+            }
+
+            for (let i = 0; i < lhs.length; i++) {
+                if (!equals(lhs[i], rhs[i])) {
+                    return false;
+                }
+            }
+
+            return true;
+        } else if (Types.isObject(lhs) && Types.isObject(rhs)) {
+            if (Object.keys(lhs).length !== Object.keys(rhs).length) {
+                return false;
+            }
 
-        if (Types.isArray(targetValue) && Types.isArray(sourceValue)) {
-            target[key] = targetValue.concat(sourceValue);
-        } else if (Types.isObject(targetValue) && Types.isObject(sourceValue)) {
-            target[key] = mergeInto({ ...targetValue }, sourceValue);
-        } else {
-            target[key] = sourceValue;
+            for (let key in lhs) {
+                if (lhs.hasOwnProperty(key)) {
+                    if (!equals(lhs[key], rhs[key])) {
+                        return false;
+                    }
+                }
+            }
+
+            return true;
+        }
+
+        return false;
+    }
+
+    export function mergeInto(target: object, source: object) {
+        if (!Types.isObject(target) || !Types.isObject(source)) {
+            return source;
         }
-    });
 
-    return target;
+        Object.keys(source).forEach(key => {
+            const targetValue = target[key];
+            const sourceValue = source[key];
+
+            if (Types.isArray(targetValue) && Types.isArray(sourceValue)) {
+                target[key] = targetValue.concat(sourceValue);
+            } else if (Types.isObject(targetValue) && Types.isObject(sourceValue)) {
+                target[key] = mergeInto({ ...targetValue }, sourceValue);
+            } else {
+                target[key] = sourceValue;
+            }
+        });
+
+        return target;
+    }
 }
\ No newline at end of file
diff --git a/frontend/app/shared/components/app-form.component.scss b/frontend/app/shared/components/app-form.component.scss
index fbb752506..e69de29bb 100644
--- a/frontend/app/shared/components/app-form.component.scss
+++ b/frontend/app/shared/components/app-form.component.scss
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/shared/components/asset-dialog.component.html b/frontend/app/shared/components/asset-dialog.component.html
deleted file mode 100644
index 937a04716..000000000
--- a/frontend/app/shared/components/asset-dialog.component.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<form [formGroup]="annotateForm.form" (ngSubmit)="annotateAsset()">
-    <sqx-modal-dialog (close)="emitComplete()">
-        <ng-container title>
-            Update Asset
-        </ng-container>
-
-        <ng-container content>
-            <sqx-form-error [error]="annotateForm.error | async"></sqx-form-error>
-        
-            <div class="form-group">
-                <label for="fileName">Name</label>
-                
-                <sqx-control-errors for="fileName" [submitted]="annotateForm.submitted | async"></sqx-control-errors>
-        
-                <input type="text" class="form-control" id="fileName" formControlName="fileName" />
-            </div>
-        
-            <div class="form-group">
-                <label for="slug">Slug</label>
-                
-                <sqx-control-errors for="slug" [submitted]="annotateForm.submitted | async"></sqx-control-errors>
-        
-                <input type="text" class="form-control slug" id="slug" formControlName="slug" sqxTransformInput="Slugify" />
-
-                <button type="button" class="btn btn-text-secondary btn-sm btn-generate" (click)="generateSlug()">
-                    Generate
-                </button>
-            </div>
-        
-            <div class="form-group">
-                <label>Tags</label>
-                
-                <sqx-control-errors for="tags" [submitted]="annotateForm.submitted | async"></sqx-control-errors>
-
-                <sqx-tag-editor [suggestions]="allTags" [allowDuplicates]="false" [undefinedWhenEmpty]="false" formControlName="tags"></sqx-tag-editor>
-            </div>
-
-            <div class="form-group">
-                <label>Metadata</label>
-
-                <div class="form-group row no-gutters" *ngFor="let form of annotateForm.metadata.controls; let i = index">
-                    <div class="col col-name pr-1">
-                        <sqx-control-errors [for]="form.get('name')" fieldName="Name" [submitted]="annotateForm.submitted | async"></sqx-control-errors>
-    
-                        <input type="text" class="form-control" maxlength="1000" [formControl]="form.get('name')" placeholder="Name" />
-                    </div>
-    
-                    <div class="col pr-1">
-                        <sqx-control-errors [for]="form.get('value')" fieldName="Value" [submitted]="annotateForm.submitted | async"></sqx-control-errors>
-    
-                        <input type="text" class="form-control" maxlength="1000" [formControl]="form.get('value')" placeholder="Value" />
-                    </div>
-
-                    <div class="col-auto col-options">
-                        <button type="button" class="btn btn-text-danger"
-                            [disabled]="!isEditable"
-                            (sqxConfirmClick)="annotateForm.removeMetadata(i)"
-                            confirmTitle="Remove url" 
-                            confirmText="Do you really want to remove this metadata?">
-                            <i class="icon-bin2"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <button type="button" class="btn btn-success" (click)="annotateForm.addMetadata()" [disabled]="!isEditable">
-                        Add Metadata
-                    </button>
-                </div>
-            </div>
-        
-            <div class="form-group form-check">
-                <input type="checkbox" class="form-check-input" id="isProtected" formControlName="isProtected" />
-
-                <label class="form-check-label" for="isProtected">Protected</label>
-            </div>
-        </ng-container>
-
-        <ng-container footer>
-            <button type="reset" class="float-left btn btn-secondary" (click)="emitComplete()">Cancel</button>
-            <button type="submit" class="float-right btn btn-primary" *ngIf="isEditable">Save</button>
-        </ng-container>
-    </sqx-modal-dialog>
-</form>
\ No newline at end of file
diff --git a/frontend/app/shared/components/asset-folder-form.component.scss b/frontend/app/shared/components/asset-folder-form.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/shared/components/asset-folder-form.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/shared/components/asset-path.component.ts b/frontend/app/shared/components/asset-path.component.ts
deleted file mode 100644
index 280b07889..000000000
--- a/frontend/app/shared/components/asset-path.component.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { AssetPathItem } from '@app/shared/internal';
-
-@Component({
-    selector: 'sqx-asset-path',
-    template: `
-        <ng-container *ngIf="path.length === 0; else normalPath">
-            <span class="btn">Search Results</span>
-        </ng-container>
-        <ng-template #normalPath>
-            <ng-container *ngFor="let item of path; let i = index">
-                <i class="icon-angle-right" *ngIf="i > 0"></i>
-
-                <a class="btn" (click)="emitNavigate(item)" [class.force]="i < path.length - 1">
-                    {{item.folderName}}
-                </a>
-            </ng-container>
-        </ng-template>
-    `,
-    styles: [`
-        i {
-            vertical-align: middle;
-        }`
-    ],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AssetPathComponent {
-    @Output()
-    public navigate = new EventEmitter<AssetPathItem>();
-
-    @Input()
-    public path: ReadonlyArray<AssetPathItem>;
-
-    public emitNavigate(item: AssetPathItem) {
-        this.navigate.emit(item);
-    }
-}
\ No newline at end of file
diff --git a/frontend/app/shared/components/assets/asset-dialog.component.html b/frontend/app/shared/components/assets/asset-dialog.component.html
new file mode 100644
index 000000000..8b3a41d1a
--- /dev/null
+++ b/frontend/app/shared/components/assets/asset-dialog.component.html
@@ -0,0 +1,100 @@
+<form [formGroup]="annotateForm.form" (ngSubmit)="annotateAsset()">
+    <sqx-modal-dialog (close)="emitComplete()" size="xl" fullHeight="true" [showHeader]="true" [showFooter]="false">
+        <ng-container title>
+            Update Asset
+        </ng-container>
+
+        <ng-container tabs>
+            <ul class="nav nav-tabs2">
+                <li class="nav-item" *ngFor="let tab of selectableTabs">
+                    <a class="nav-link" [class.active]="tab === selectedTab" (click)="selectTab(tab)">{{tab}}</a>
+                </li>
+            </ul>
+            
+            <button type="submit" class="float-right btn btn-primary" [disabled]="!isEditable">Save</button>
+        </ng-container>
+
+        <ng-container content>
+            <ng-container [ngSwitch]="selectedTab">
+                <ng-container *ngSwitchCase="'Image'">
+                    <div class="image">
+                        <sqx-image-editor [imageUrl]="asset.contentUrl"></sqx-image-editor>
+                    </div>
+                </ng-container>
+                <ng-container *ngSwitchCase="'Metadata'">
+                    <div class="metadata">
+                        <sqx-form-error [error]="annotateForm.error | async"></sqx-form-error>
+            
+                        <div class="form-group">
+                            <label for="fileName">Name</label>
+                            
+                            <sqx-control-errors for="fileName" [submitted]="annotateForm.submitted | async"></sqx-control-errors>
+                    
+                            <input type="text" class="form-control" id="fileName" formControlName="fileName" />
+                        </div>
+                    
+                        <div class="form-group">
+                            <label for="slug">Slug</label>
+                            
+                            <sqx-control-errors for="slug" [submitted]="annotateForm.submitted | async"></sqx-control-errors>
+                    
+                            <input type="text" class="form-control slug" id="slug" formControlName="slug" sqxTransformInput="Slugify" />
+            
+                            <button type="button" class="btn btn-text-secondary btn-sm slug-generate" (click)="generateSlug()">
+                                Generate
+                            </button>
+                        </div>
+                    
+                        <div class="form-group">
+                            <label>Tags</label>
+                            
+                            <sqx-control-errors for="tags" [submitted]="annotateForm.submitted | async"></sqx-control-errors>
+            
+                            <sqx-tag-editor [suggestions]="allTags" [allowDuplicates]="false" [undefinedWhenEmpty]="false" formControlName="tags"></sqx-tag-editor>
+                        </div>
+            
+                        <div class="form-group">
+                            <label>Metadata</label>
+            
+                            <div class="form-group row no-gutters" *ngFor="let form of annotateForm.metadata.controls; let i = index">
+                                <div class="col col-name pr-1">
+                                    <sqx-control-errors [for]="form.get('name')" fieldName="Name" [submitted]="annotateForm.submitted | async"></sqx-control-errors>
+                
+                                    <input type="text" class="form-control" maxlength="1000" [formControl]="form.get('name')" placeholder="Name" />
+                                </div>
+                
+                                <div class="col pr-1">
+                                    <sqx-control-errors [for]="form.get('value')" fieldName="Value" [submitted]="annotateForm.submitted | async"></sqx-control-errors>
+                
+                                    <input type="text" class="form-control" maxlength="1000" [formControl]="form.get('value')" placeholder="Value" />
+                                </div>
+            
+                                <div class="col-auto col-options">
+                                    <button type="button" class="btn btn-text-danger"
+                                        [disabled]="!isEditable"
+                                        (sqxConfirmClick)="annotateForm.removeMetadata(i)"
+                                        confirmTitle="Remove url" 
+                                        confirmText="Do you really want to remove this metadata?">
+                                        <i class="icon-bin2"></i>
+                                    </button>
+                                </div>
+                            </div>
+            
+                            <div class="form-group">
+                                <button type="button" class="btn btn-success" (click)="annotateForm.addMetadata()" [disabled]="!isEditable">
+                                    Add Metadata
+                                </button>
+                            </div>
+                        </div>
+                    
+                        <div class="form-group form-check">
+                            <input type="checkbox" class="form-check-input" id="isProtected" formControlName="isProtected" />
+            
+                            <label class="form-check-label" for="isProtected">Protected</label>
+                        </div>
+                    </div>
+                </ng-container>
+            </ng-container>
+        </ng-container>
+    </sqx-modal-dialog>
+</form>
\ No newline at end of file
diff --git a/frontend/app/shared/components/asset-dialog.component.scss b/frontend/app/shared/components/assets/asset-dialog.component.scss
similarity index 57%
rename from frontend/app/shared/components/asset-dialog.component.scss
rename to frontend/app/shared/components/assets/asset-dialog.component.scss
index 845a0b88f..61f848c07 100644
--- a/frontend/app/shared/components/asset-dialog.component.scss
+++ b/frontend/app/shared/components/assets/asset-dialog.component.scss
@@ -1,15 +1,22 @@
-@import '_vars';
-@import '_mixins';
-
 .form-group {
     position: relative;
 }
 
+.image {
+    @include absolute(0, 0, 0, 0);
+}
+
+.metadata {
+    margin: 1rem auto;
+    max-width: 500px;
+    min-width: 0;
+}
+
 .slug {
     padding-right: 6rem;
 }
 
-.btn-generate {
+.slug-generate {
     & {
         @include absolute(auto, 10px, 3px, auto);
     }
diff --git a/frontend/app/shared/components/asset-dialog.component.ts b/frontend/app/shared/components/assets/asset-dialog.component.ts
similarity index 90%
rename from frontend/app/shared/components/asset-dialog.component.ts
rename to frontend/app/shared/components/assets/asset-dialog.component.ts
index 658e16e64..c19da7262 100644
--- a/frontend/app/shared/components/asset-dialog.component.ts
+++ b/frontend/app/shared/components/assets/asset-dialog.component.ts
@@ -32,6 +32,9 @@ export class AssetDialogComponent implements OnInit {
 
     public isEditable = false;
 
+    public selectableTabs: ReadonlyArray<string> = ['Image', 'Metadata'];
+    public selectedTab = this.selectableTabs[0];
+
     public annotateForm = new AnnotateAssetForm(this.formBuilder);
 
     constructor(
@@ -47,6 +50,10 @@ export class AssetDialogComponent implements OnInit {
         this.annotateForm.setEnabled(this.isEditable);
     }
 
+    public selectTab(tab: string) {
+        this.selectedTab = tab;
+    }
+
     public generateSlug() {
         this.annotateForm.generateSlug(this.asset);
     }
diff --git a/frontend/app/shared/components/asset-folder-form.component.html b/frontend/app/shared/components/assets/asset-folder-form.component.html
similarity index 100%
rename from frontend/app/shared/components/asset-folder-form.component.html
rename to frontend/app/shared/components/assets/asset-folder-form.component.html
diff --git a/frontend/app/shared/components/assets/asset-folder-form.component.scss b/frontend/app/shared/components/assets/asset-folder-form.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shared/components/asset-folder-form.component.ts b/frontend/app/shared/components/assets/asset-folder-form.component.ts
similarity index 100%
rename from frontend/app/shared/components/asset-folder-form.component.ts
rename to frontend/app/shared/components/assets/asset-folder-form.component.ts
diff --git a/frontend/app/shared/components/asset-folder.component.html b/frontend/app/shared/components/assets/asset-folder.component.html
similarity index 96%
rename from frontend/app/shared/components/asset-folder.component.html
rename to frontend/app/shared/components/assets/asset-folder.component.html
index b57b65cdc..d83490fc5 100644
--- a/frontend/app/shared/components/asset-folder.component.html
+++ b/frontend/app/shared/components/assets/asset-folder.component.html
@@ -25,7 +25,7 @@
     
                             <a class="dropdown-item dropdown-item-delete"
                                 [class.disabled]="!canDelete"
-                                (sqxConfirmClick)="emitDelete()"
+                                (sqxConfirmClick)="delete.emit()"
                                 confirmTitle="Delete folder" 
                                 confirmText="Do you really want to delete the folder and all assets?">
                                 Delete
diff --git a/frontend/app/shared/components/asset-folder.component.scss b/frontend/app/shared/components/assets/asset-folder.component.scss
similarity index 93%
rename from frontend/app/shared/components/asset-folder.component.scss
rename to frontend/app/shared/components/assets/asset-folder.component.scss
index 3de377410..dfff89a63 100644
--- a/frontend/app/shared/components/asset-folder.component.scss
+++ b/frontend/app/shared/components/assets/asset-folder.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host /deep/ {
     .cdk-drag-placeholder {
         display: none;
diff --git a/frontend/app/shared/components/asset-folder.component.ts b/frontend/app/shared/components/assets/asset-folder.component.ts
similarity index 94%
rename from frontend/app/shared/components/asset-folder.component.ts
rename to frontend/app/shared/components/assets/asset-folder.component.ts
index 240dcd4aa..f6c53afeb 100644
--- a/frontend/app/shared/components/asset-folder.component.ts
+++ b/frontend/app/shared/components/assets/asset-folder.component.ts
@@ -56,8 +56,4 @@ export class AssetFolderComponent {
     public emitNavigate() {
         this.navigate.emit(this.assetFolder);
     }
-
-    public emitDelete() {
-        this.delete.emit(this.assetFolder);
-    }
 }
\ No newline at end of file
diff --git a/frontend/app/shared/components/assets/asset-path.component.html b/frontend/app/shared/components/assets/asset-path.component.html
new file mode 100644
index 000000000..864331291
--- /dev/null
+++ b/frontend/app/shared/components/assets/asset-path.component.html
@@ -0,0 +1,12 @@
+<ng-container *ngIf="path.length === 0; else normalPath">
+    <span class="btn">Search Results</span>
+</ng-container>
+<ng-template #normalPath>
+    <ng-container *ngFor="let item of path; let i = index">
+        <i class="icon-angle-right" *ngIf="i > 0"></i>
+
+        <a class="btn" (click)="navigate.emit(item)" [class.force]="i < path.length - 1">
+            {{item.folderName}}
+        </a>
+    </ng-container>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/app/shared/components/assets/asset-path.component.scss b/frontend/app/shared/components/assets/asset-path.component.scss
new file mode 100644
index 000000000..2ef6a98f9
--- /dev/null
+++ b/frontend/app/shared/components/assets/asset-path.component.scss
@@ -0,0 +1,3 @@
+i {
+    vertical-align: middle;
+}
\ No newline at end of file
diff --git a/frontend/app/shared/components/assets/asset-path.component.ts b/frontend/app/shared/components/assets/asset-path.component.ts
new file mode 100644
index 000000000..fbba57145
--- /dev/null
+++ b/frontend/app/shared/components/assets/asset-path.component.ts
@@ -0,0 +1,24 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { AssetPathItem } from '@app/shared/internal';
+
+@Component({
+    selector: 'sqx-asset-path',
+    styleUrls: ['./asset-path.component.scss'],
+    templateUrl: './asset-path.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AssetPathComponent {
+    @Output()
+    public navigate = new EventEmitter<AssetPathItem>();
+
+    @Input()
+    public path: ReadonlyArray<AssetPathItem>;
+}
\ No newline at end of file
diff --git a/frontend/app/shared/components/asset-uploader.component.html b/frontend/app/shared/components/assets/asset-uploader.component.html
similarity index 100%
rename from frontend/app/shared/components/asset-uploader.component.html
rename to frontend/app/shared/components/assets/asset-uploader.component.html
diff --git a/frontend/app/shared/components/asset-uploader.component.scss b/frontend/app/shared/components/assets/asset-uploader.component.scss
similarity index 97%
rename from frontend/app/shared/components/asset-uploader.component.scss
rename to frontend/app/shared/components/assets/asset-uploader.component.scss
index 5dea7b1e5..f25e8d02d 100644
--- a/frontend/app/shared/components/asset-uploader.component.scss
+++ b/frontend/app/shared/components/assets/asset-uploader.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .icon-upload-3 {
     font-size: 1.4rem;
     font-weight: lighter;
diff --git a/frontend/app/shared/components/asset-uploader.component.ts b/frontend/app/shared/components/assets/asset-uploader.component.ts
similarity index 95%
rename from frontend/app/shared/components/asset-uploader.component.ts
rename to frontend/app/shared/components/assets/asset-uploader.component.ts
index 4bd64fe44..a391f59ec 100644
--- a/frontend/app/shared/components/asset-uploader.component.ts
+++ b/frontend/app/shared/components/assets/asset-uploader.component.ts
@@ -15,7 +15,7 @@ import {
     Upload
 } from '@app/shared/internal';
 
-import { AppsState } from './../state/apps.state';
+import { AppsState } from '@app/shared/internal';
 
 @Component({
     selector: 'sqx-asset-uploader',
diff --git a/frontend/app/shared/components/asset.component.html b/frontend/app/shared/components/assets/asset.component.html
similarity index 94%
rename from frontend/app/shared/components/asset.component.html
rename to frontend/app/shared/components/assets/asset.component.html
index 13188bff4..bcdd6cf2f 100644
--- a/frontend/app/shared/components/asset.component.html
+++ b/frontend/app/shared/components/assets/asset.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="!isListView; else listTemplate">
-    <div class="card" [class.selectable]="isSelectable" [class.border-primary]="isSelected" (click)="emitSelect()" 
+    <div class="card" [class.selectable]="isSelectable" [class.border-primary]="isSelected" (click)="select.emit()" 
         (sqxDropFile)="updateFile($event)"
         [sqxDropDisabled]="!asset || !asset.canUpload"
         [noDrop]="true">
@@ -31,12 +31,12 @@
                             <i class="icon-download"></i>
                         </a>
                         <a class="file-delete ml-2" *ngIf="!isDisabled && !removeMode && asset.canDelete"
-                            (sqxConfirmClick)="emitDelete()"
+                            (sqxConfirmClick)="delete.emit()"
                             confirmTitle="Delete asset" 
                             confirmText="Do you really want to delete the asset?">
                             <i class="icon-delete"></i>
                         </a>
-                        <a class="file-delete ml-2" (click)="emitRemove()" *ngIf="removeMode">
+                        <a class="file-delete ml-2" (click)="remove.emit()" *ngIf="removeMode">
                             <i class="icon-close"></i>
                         </a>
                     </div>
@@ -84,7 +84,7 @@
 </ng-container>
 
 <ng-template #listTemplate>
-    <div class="table-items-row" [class.selectable]="isSelectable" (click)="emitSelect()" 
+    <div class="table-items-row" [class.selectable]="isSelectable" (click)="select.emit()" 
         (sqxDropFile)="updateFile($event)"
         [sqxDropDisabled]="!asset || !asset.canUpload"
         [noDrop]="true">
@@ -126,12 +126,12 @@
 
                     <td class="col-actions text-right" *ngIf="!isDisabled || removeMode">
                         <button type="button" class="btn btn-text-danger" *ngIf="!isDisabled && !removeMode && asset.canDelete"
-                            (sqxConfirmClick)="emitDelete()"
+                            (sqxConfirmClick)="remove.emit()"
                             confirmTitle="Delete asset" 
                             confirmText="Do you really want to delete the asset?">
                             <i class="icon-bin2"></i>
                         </button>
-                        <button type="button" class="btn btn-text-secondary" (click)="emitRemove()" *ngIf="removeMode">
+                        <button type="button" class="btn btn-text-secondary" (click)="remove.emit()" *ngIf="removeMode">
                             <i class="icon-close"></i>
                         </button>
                     </td>
diff --git a/frontend/app/shared/components/asset.component.scss b/frontend/app/shared/components/assets/asset.component.scss
similarity index 99%
rename from frontend/app/shared/components/asset.component.scss
rename to frontend/app/shared/components/assets/asset.component.scss
index 3c8972d14..d6f664f43 100644
--- a/frontend/app/shared/components/asset.component.scss
+++ b/frontend/app/shared/components/assets/asset.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 // sass-lint:disable single-line-per-selector
 
 $list-height: 2.25rem;
diff --git a/frontend/app/shared/components/asset.component.ts b/frontend/app/shared/components/assets/asset.component.ts
similarity index 94%
rename from frontend/app/shared/components/asset.component.ts
rename to frontend/app/shared/components/assets/asset.component.ts
index c2fc2cdf1..6e17c0f9a 100644
--- a/frontend/app/shared/components/asset.component.ts
+++ b/frontend/app/shared/components/assets/asset.component.ts
@@ -134,14 +134,6 @@ export class AssetComponent implements OnInit {
         }
     }
 
-    public emitSelect() {
-        this.select.emit(this.asset);
-    }
-
-    public emitDelete() {
-        this.delete.emit(this.asset);
-    }
-
     public emitLoad(asset: AssetDto) {
         this.load.emit(asset);
     }
@@ -150,10 +142,6 @@ export class AssetComponent implements OnInit {
         this.loadError.emit(error);
     }
 
-    public emitRemove() {
-        this.remove.emit();
-    }
-
     private setProgress(progress: number) {
         this.progress = progress;
 
diff --git a/frontend/app/shared/components/assets-list.component.html b/frontend/app/shared/components/assets/assets-list.component.html
similarity index 98%
rename from frontend/app/shared/components/assets-list.component.html
rename to frontend/app/shared/components/assets/assets-list.component.html
index f4576152b..bfbc16352 100644
--- a/frontend/app/shared/components/assets-list.component.html
+++ b/frontend/app/shared/components/assets/assets-list.component.html
@@ -80,7 +80,7 @@
                         [isSelectable]="!!selectedIds"
                         [isSelected]="isSelected(asset)"
                         [allTags]="tags"
-                        (select)="emitSelect(asset)"
+                        (select)="select.emit(asset)"
                         (delete)="deleteAsset(asset)">
                     </sqx-asset>
                 </div>
diff --git a/frontend/app/shared/components/assets-list.component.scss b/frontend/app/shared/components/assets/assets-list.component.scss
similarity index 97%
rename from frontend/app/shared/components/assets-list.component.scss
rename to frontend/app/shared/components/assets/assets-list.component.scss
index 90ab88f68..19e12c089 100644
--- a/frontend/app/shared/components/assets-list.component.scss
+++ b/frontend/app/shared/components/assets/assets-list.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .unrow {
     display: block;
 }
diff --git a/frontend/app/shared/components/assets-list.component.ts b/frontend/app/shared/components/assets/assets-list.component.ts
similarity index 97%
rename from frontend/app/shared/components/assets-list.component.ts
rename to frontend/app/shared/components/assets/assets-list.component.ts
index ec4d3bff0..ff6432500 100644
--- a/frontend/app/shared/components/assets-list.component.ts
+++ b/frontend/app/shared/components/assets/assets-list.component.ts
@@ -85,10 +85,6 @@ export class AssetsListComponent {
         this.state.deleteAssetFolder(assetFolder);
     }
 
-    public emitSelect(asset: AssetDto) {
-        this.select.emit(asset);
-    }
-
     public isSelected(asset: AssetDto) {
         return this.selectedIds && this.selectedIds[asset.id];
     }
diff --git a/frontend/app/shared/components/assets-selector.component.html b/frontend/app/shared/components/assets/assets-selector.component.html
similarity index 96%
rename from frontend/app/shared/components/assets-selector.component.html
rename to frontend/app/shared/components/assets/assets-selector.component.html
index a51dc105f..c319d0c35 100644
--- a/frontend/app/shared/components/assets-selector.component.html
+++ b/frontend/app/shared/components/assets/assets-selector.component.html
@@ -1,4 +1,4 @@
-<sqx-modal-dialog (close)="emitComplete()" large="true" fullHeight="true">
+<sqx-modal-dialog (close)="emitComplete()" size="lg" fullHeight="true">
     <ng-container title>
         Select assets
     </ng-container>
diff --git a/frontend/app/shared/components/assets-selector.component.scss b/frontend/app/shared/components/assets/assets-selector.component.scss
similarity index 92%
rename from frontend/app/shared/components/assets-selector.component.scss
rename to frontend/app/shared/components/assets/assets-selector.component.scss
index 1a6127d3a..e13db9d58 100644
--- a/frontend/app/shared/components/assets-selector.component.scss
+++ b/frontend/app/shared/components/assets/assets-selector.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host ::ng-deep {
     .search {
         .form-control {
diff --git a/frontend/app/shared/components/assets-selector.component.ts b/frontend/app/shared/components/assets/assets-selector.component.ts
similarity index 100%
rename from frontend/app/shared/components/assets-selector.component.ts
rename to frontend/app/shared/components/assets/assets-selector.component.ts
diff --git a/frontend/app/shared/components/assets/image-editor.component.html b/frontend/app/shared/components/assets/image-editor.component.html
new file mode 100644
index 000000000..f1410bff4
--- /dev/null
+++ b/frontend/app/shared/components/assets/image-editor.component.html
@@ -0,0 +1 @@
+<div #editor></div>
\ No newline at end of file
diff --git a/frontend/app/shared/components/assets/image-editor.component.scss b/frontend/app/shared/components/assets/image-editor.component.scss
new file mode 100644
index 000000000..4e05249c1
--- /dev/null
+++ b/frontend/app/shared/components/assets/image-editor.component.scss
@@ -0,0 +1,29 @@
+:host {
+    height: 100%;
+}
+
+:host /deep/ {
+    .tui-image-editor-header {
+        display: none;
+    }
+
+    * {
+        box-sizing: content-box;
+    }
+
+    .tie-btn-delete {
+        display: none !important;
+    }
+
+    .tie-btn-delete-all {
+        display: none !important;
+
+        & + li {
+            display: none !important;
+        }
+    }
+
+    svg {
+        vertical-align: baseline;
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/shared/components/assets/image-editor.component.ts b/frontend/app/shared/components/assets/image-editor.component.ts
new file mode 100644
index 000000000..8bce3198b
--- /dev/null
+++ b/frontend/app/shared/components/assets/image-editor.component.ts
@@ -0,0 +1,159 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core';
+
+import { ResourceLoaderService } from '@app/shared/internal';
+
+declare var tui: any;
+
+const blackTheme = {
+    'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
+    'common.bisize.width': '251px',
+    'common.bisize.height': '21px',
+    'common.backgroundImage': 'none',
+    'common.backgroundColor': '#000',
+    'common.border': '0px',
+
+    // header
+    'header.backgroundImage': 'none',
+    'header.backgroundColor': 'transparent',
+    'header.border': '0px',
+
+    // load button
+    'loadButton.backgroundColor': '#fff',
+    'loadButton.border': '1px solid #ddd',
+    'loadButton.color': '#222',
+    'loadButton.fontFamily': '\'Noto Sans\', sans-serif',
+    'loadButton.fontSize': '12px',
+
+    // download button
+    'downloadButton.backgroundColor': '#fdba3b',
+    'downloadButton.border': '1px solid #fdba3b',
+    'downloadButton.color': '#fff',
+    'downloadButton.fontFamily': '\'Noto Sans\', sans-serif',
+    'downloadButton.fontSize': '12px',
+
+    // main icons
+    'menu.normalIcon.path': 'https://unpkg.com/tui-image-editor@3.7.3/dist/svg/icon-d.svg',
+    'menu.normalIcon.name': 'icon-d',
+    'menu.activeIcon.path': 'https://unpkg.com/tui-image-editor@3.7.3/dist/svg/icon-b.svg',
+    'menu.activeIcon.name': 'icon-b',
+    'menu.disabledIcon.path': 'https://unpkg.com/tui-image-editor@3.7.3/dist/svg/icon-a.svg',
+    'menu.disabledIcon.name': 'icon-a',
+    'menu.hoverIcon.path': 'https://unpkg.com/tui-image-editor@3.7.3/dist/svg/icon-c.svg',
+    'menu.hoverIcon.name': 'icon-c',
+    'menu.iconSize.width': '24px',
+    'menu.iconSize.height': '24px',
+
+    // submenu primary color
+    'submenu.backgroundColor': '#000',
+    'submenu.partition.color': '#3c3c3c',
+
+    // submenu icons
+    'submenu.normalIcon.path': 'https://unpkg.com/tui-image-editor@3.7.3/dist/svg/icon-d.svg',
+    'submenu.normalIcon.name': 'icon-d',
+    'submenu.activeIcon.path': 'https://unpkg.com/tui-image-editor@3.7.3/dist/svg/icon-c.svg',
+    'submenu.activeIcon.name': 'icon-c',
+    'submenu.iconSize.width': '32px',
+    'submenu.iconSize.height': '32px',
+
+    // submenu labels
+    'submenu.normalLabel.color': '#8a8a8a',
+    'submenu.normalLabel.fontWeight': 'normal',
+    'submenu.activeLabel.color': '#fff',
+    'submenu.activeLabel.fontWeight': 'normal',
+
+    // checkbox style
+    'checkbox.border': '0px',
+    'checkbox.backgroundColor': '#fff',
+
+    // range style
+    'range.pointer.color': '#fff',
+    'range.bar.color': '#666',
+    'range.subbar.color': '#d1d1d1',
+
+    'range.disabledPointer.color': '#414141',
+    'range.disabledBar.color': '#282828',
+    'range.disabledSubbar.color': '#414141',
+
+    'range.value.color': '#fff',
+    'range.value.fontWeight': 'normal',
+    'range.value.fontSize': '11px',
+    'range.value.border': '1px solid #353535',
+    'range.value.backgroundColor': '#151515',
+    'range.title.color': '#fff',
+    'range.title.fontWeight': 'normal',
+
+    // colorpicker style
+    'colorpicker.button.border': '1px solid #1e1e1e',
+    'colorpicker.title.color': '#fff'
+};
+
+@Component({
+    selector: 'sqx-image-editor',
+    styleUrls: ['./image-editor.component.scss'],
+    templateUrl: './image-editor.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ImageEditorComponent implements AfterViewInit, OnChanges {
+    private imageEditor: any;
+
+    @Input()
+    public imageUrl: string;
+
+    @ViewChild('editor', { static: false })
+    public editor: ElementRef;
+
+    constructor(
+        private readonly resourceLoader: ResourceLoaderService
+    ) {
+    }
+
+    public ngOnChanges() {
+        if (this.imageEditor && this.imageUrl) {
+            this.imageEditor.loadImageFromURL(this.imageUrl);
+        }
+    }
+
+    public ngAfterViewInit() {
+        const styles = [
+            'https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.css',
+            'https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css'
+        ];
+
+        const scripts = [
+            'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js',
+            'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js',
+            'https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.min.js',
+            'https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.js',
+            'https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js'
+        ];
+
+        styles.forEach(style => this.resourceLoader.loadStyle(style));
+
+        const s = scripts.map(script => this.resourceLoader.loadScript(script));
+
+        Promise.all(s).then(() => {
+            this.imageEditor = new tui.ImageEditor(this.editor.nativeElement, {
+                includeUI: {
+                    loadImage: {
+                        path: this.imageUrl, name: 'image'
+                    },
+                    menu: [
+                        'crop',
+                        'flip',
+                        'rotate',
+                        'mask',
+                        'filter'
+                    ],
+                    theme: blackTheme
+                }
+            });
+        });
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/shared/components/assets/pipes.ts b/frontend/app/shared/components/assets/pipes.ts
new file mode 100644
index 000000000..154046a96
--- /dev/null
+++ b/frontend/app/shared/components/assets/pipes.ts
@@ -0,0 +1,75 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+import {
+    ApiUrlConfig,
+    AssetDto,
+    MathHelper
+} from '@app/shared/internal';
+
+@Pipe({
+    name: 'sqxAssetUrl',
+    pure: true
+})
+export class AssetUrlPipe implements PipeTransform {
+    constructor(
+        private readonly apiUrl: ApiUrlConfig
+    ) {
+    }
+
+    public transform(asset: AssetDto): string {
+        return `${asset.fullUrl(this.apiUrl)}&sq=${MathHelper.guid()}`;
+    }
+}
+
+@Pipe({
+    name: 'sqxAssetPreviewUrl',
+    pure: true
+})
+export class AssetPreviewUrlPipe implements PipeTransform {
+    constructor(
+        private readonly apiUrl: ApiUrlConfig
+    ) {
+    }
+
+    public transform(asset: AssetDto): string {
+        return asset.fullUrl(this.apiUrl);
+    }
+}
+
+@Pipe({
+    name: 'sqxFileIcon',
+    pure: true
+})
+export class FileIconPipe implements PipeTransform {
+    public transform(asset: { mimeType: string, fileType: string }): string {
+        const knownTypes = [
+            'doc',
+            'docx',
+            'pdf',
+            'ppt',
+            'pptx',
+            'video',
+            'xls',
+            'xlsx'
+        ];
+
+        let mimeIcon: string;
+
+        const mimeParts = asset.mimeType.split('/');
+
+        if (mimeParts.length === 2 && mimeParts[0].toLowerCase() === 'video') {
+            mimeIcon = 'video';
+        } else {
+            mimeIcon = knownTypes.indexOf(asset.fileType) >= 0 ? asset.fileType : 'generic';
+        }
+
+        return `./images/asset_${mimeIcon}.svg`;
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/shared/components/comment.component.html b/frontend/app/shared/components/comments/comment.component.html
similarity index 95%
rename from frontend/app/shared/components/comment.component.html
rename to frontend/app/shared/components/comments/comment.component.html
index 09abf1940..15415a663 100644
--- a/frontend/app/shared/components/comment.component.html
+++ b/frontend/app/shared/components/comments/comment.component.html
@@ -21,7 +21,7 @@
     </div>
 
     <button *ngIf="comment.user === userToken || canDelete" type="button" class="btn btn-sm btn-text-danger item-remove"
-        (sqxConfirmClick)="emitDelete()"
+        (sqxConfirmClick)="delete.emit()"
         confirmTitle="Delete comment"
         confirmText="Do you really want to delete the comment?"
         [confirmRequired]="confirmDelete">
diff --git a/frontend/app/shared/components/comment.component.scss b/frontend/app/shared/components/comments/comment.component.scss
similarity index 95%
rename from frontend/app/shared/components/comment.component.scss
rename to frontend/app/shared/components/comments/comment.component.scss
index 558871db7..39a0c7449 100644
--- a/frontend/app/shared/components/comment.component.scss
+++ b/frontend/app/shared/components/comments/comment.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .item-remove {
     @include absolute(-5px, -15px, auto, auto);
     display: none;
diff --git a/frontend/app/shared/components/comment.component.ts b/frontend/app/shared/components/comments/comment.component.ts
similarity index 92%
rename from frontend/app/shared/components/comment.component.ts
rename to frontend/app/shared/components/comments/comment.component.ts
index 4e3971005..4be80932f 100644
--- a/frontend/app/shared/components/comment.component.ts
+++ b/frontend/app/shared/components/comments/comment.component.ts
@@ -33,8 +33,4 @@ export class CommentComponent {
 
     @Input()
     public userToken: string;
-
-    public emitDelete() {
-        this.delete.emit();
-    }
 }
\ No newline at end of file
diff --git a/frontend/app/shared/components/comments.component.html b/frontend/app/shared/components/comments/comments.component.html
similarity index 100%
rename from frontend/app/shared/components/comments.component.html
rename to frontend/app/shared/components/comments/comments.component.html
diff --git a/frontend/app/shared/components/comments.component.scss b/frontend/app/shared/components/comments/comments.component.scss
similarity index 93%
rename from frontend/app/shared/components/comments.component.scss
rename to frontend/app/shared/components/comments/comments.component.scss
index 86700a24a..3e92a30a4 100644
--- a/frontend/app/shared/components/comments.component.scss
+++ b/frontend/app/shared/components/comments/comments.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host ::ng-deep {
     .mention-menu {
         border-color: $color-border !important;
diff --git a/frontend/app/shared/components/comments.component.ts b/frontend/app/shared/components/comments/comments.component.ts
similarity index 100%
rename from frontend/app/shared/components/comments.component.ts
rename to frontend/app/shared/components/comments/comments.component.ts
diff --git a/frontend/app/shared/components/geolocation-editor.component.html b/frontend/app/shared/components/forms/geolocation-editor.component.html
similarity index 100%
rename from frontend/app/shared/components/geolocation-editor.component.html
rename to frontend/app/shared/components/forms/geolocation-editor.component.html
diff --git a/frontend/app/shared/components/geolocation-editor.component.scss b/frontend/app/shared/components/forms/geolocation-editor.component.scss
similarity index 88%
rename from frontend/app/shared/components/geolocation-editor.component.scss
rename to frontend/app/shared/components/forms/geolocation-editor.component.scss
index 1e55176c4..54f3bfbd1 100644
--- a/frontend/app/shared/components/geolocation-editor.component.scss
+++ b/frontend/app/shared/components/forms/geolocation-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 .editor {
     height: 30rem;
 }
diff --git a/frontend/app/shared/components/geolocation-editor.component.ts b/frontend/app/shared/components/forms/geolocation-editor.component.ts
similarity index 99%
rename from frontend/app/shared/components/geolocation-editor.component.ts
rename to frontend/app/shared/components/forms/geolocation-editor.component.ts
index 3763f4391..bf054568b 100644
--- a/frontend/app/shared/components/geolocation-editor.component.ts
+++ b/frontend/app/shared/components/forms/geolocation-editor.component.ts
@@ -39,7 +39,9 @@ type UpdateOptions = { reset?: boolean; pan?: true; fire?: boolean };
     selector: 'sqx-geolocation-editor',
     styleUrls: ['./geolocation-editor.component.scss'],
     templateUrl: './geolocation-editor.component.html',
-    providers: [SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GeolocationEditorComponent extends StatefulControlComponent<Snapshot, Geolocation> implements AfterViewInit {
diff --git a/frontend/app/shared/components/language-selector.component.html b/frontend/app/shared/components/forms/language-selector.component.html
similarity index 100%
rename from frontend/app/shared/components/language-selector.component.html
rename to frontend/app/shared/components/forms/language-selector.component.html
diff --git a/frontend/app/shared/components/language-selector.component.scss b/frontend/app/shared/components/forms/language-selector.component.scss
similarity index 82%
rename from frontend/app/shared/components/language-selector.component.scss
rename to frontend/app/shared/components/forms/language-selector.component.scss
index 2281e1a3e..11a2b2fe5 100644
--- a/frontend/app/shared/components/language-selector.component.scss
+++ b/frontend/app/shared/components/forms/language-selector.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .dropdown-item {
     cursor: pointer;
 }
diff --git a/frontend/app/shared/components/language-selector.component.ts b/frontend/app/shared/components/forms/language-selector.component.ts
similarity index 93%
rename from frontend/app/shared/components/language-selector.component.ts
rename to frontend/app/shared/components/forms/language-selector.component.ts
index 651fb34b1..c649ef4fd 100644
--- a/frontend/app/shared/components/language-selector.component.ts
+++ b/frontend/app/shared/components/forms/language-selector.component.ts
@@ -7,8 +7,11 @@
 
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 
-import { fadeAnimation, ModalModel } from '@app/shared/internal';
-import { LanguageDto } from '../services/languages.service';
+import {
+    fadeAnimation,
+    LanguageDto,
+    ModalModel
+} from '@app/shared/internal';
 
 export interface Language { iso2Code: string; englishName: string; isMasterLanguage: true; }
 
diff --git a/frontend/app/shared/components/markdown-editor.component.html b/frontend/app/shared/components/forms/markdown-editor.component.html
similarity index 100%
rename from frontend/app/shared/components/markdown-editor.component.html
rename to frontend/app/shared/components/forms/markdown-editor.component.html
diff --git a/frontend/app/shared/components/markdown-editor.component.scss b/frontend/app/shared/components/forms/markdown-editor.component.scss
similarity index 83%
rename from frontend/app/shared/components/markdown-editor.component.scss
rename to frontend/app/shared/components/forms/markdown-editor.component.scss
index 0f012abd6..685346310 100644
--- a/frontend/app/shared/components/markdown-editor.component.scss
+++ b/frontend/app/shared/components/forms/markdown-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 $background: #fff;
 
 :host ::ng-deep {
diff --git a/frontend/app/shared/components/markdown-editor.component.ts b/frontend/app/shared/components/forms/markdown-editor.component.ts
similarity index 99%
rename from frontend/app/shared/components/markdown-editor.component.ts
rename to frontend/app/shared/components/forms/markdown-editor.component.ts
index 2ce0e7b8b..c3fa7fb70 100644
--- a/frontend/app/shared/components/markdown-editor.component.ts
+++ b/frontend/app/shared/components/forms/markdown-editor.component.ts
@@ -34,7 +34,9 @@ interface State {
     selector: 'sqx-markdown-editor',
     styleUrls: ['./markdown-editor.component.scss'],
     templateUrl: './markdown-editor.component.html',
-    providers: [SQX_MARKDOWN_EDITOR_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_MARKDOWN_EDITOR_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MarkdownEditorComponent extends StatefulControlComponent<State, string> implements AfterViewInit {
diff --git a/frontend/app/shared/components/forms/references-dropdown.component.html b/frontend/app/shared/components/forms/references-dropdown.component.html
new file mode 100644
index 000000000..0d42c4076
--- /dev/null
+++ b/frontend/app/shared/components/forms/references-dropdown.component.html
@@ -0,0 +1,5 @@
+<sqx-dropdown [formControl]="selectionControl" [items]="snapshot.contentNames">
+    <ng-template let-content="$implicit" let-context="context">
+        <span class="truncate" [innerHTML]="content.name | sqxHighlight:context"></span>
+    </ng-template>
+</sqx-dropdown>
\ No newline at end of file
diff --git a/frontend/app/shared/components/forms/references-dropdown.component.scss b/frontend/app/shared/components/forms/references-dropdown.component.scss
new file mode 100644
index 000000000..103b9730a
--- /dev/null
+++ b/frontend/app/shared/components/forms/references-dropdown.component.scss
@@ -0,0 +1,3 @@
+.truncate {
+    min-height: 1.5rem;
+}
\ No newline at end of file
diff --git a/frontend/app/shared/components/references-dropdown.component.ts b/frontend/app/shared/components/forms/references-dropdown.component.ts
similarity index 91%
rename from frontend/app/shared/components/references-dropdown.component.ts
rename to frontend/app/shared/components/forms/references-dropdown.component.ts
index 72b801699..9c652714e 100644
--- a/frontend/app/shared/components/references-dropdown.component.ts
+++ b/frontend/app/shared/components/forms/references-dropdown.component.ts
@@ -36,19 +36,11 @@ const NO_EMIT = { emitEvent: false };
 
 @Component({
     selector: 'sqx-references-dropdown',
-    template: `
-        <sqx-dropdown [formControl]="selectionControl" [items]="snapshot.contentNames">
-            <ng-template let-content="$implicit" let-context="context">
-                <span class="truncate" [innerHTML]="content.name | sqxHighlight:context"></span>
-            </ng-template>
-        </sqx-dropdown>
-    `,
-    styles: [`
-        .truncate {
-            min-height: 1.5rem;
-        }`
+    styleUrls: ['./references-dropdown.component.scss'],
+    templateUrl: './references-dropdown.component.html',
+    providers: [
+        SQX_REFERENCES_DROPDOWN_CONTROL_VALUE_ACCESSOR
     ],
-    providers: [SQX_REFERENCES_DROPDOWN_CONTROL_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ReferencesDropdownComponent extends StatefulControlComponent<State, ReadonlyArray<string> | string> implements OnChanges {
diff --git a/frontend/app/shared/components/forms/references-tags.component.html b/frontend/app/shared/components/forms/references-tags.component.html
new file mode 100644
index 000000000..d501ef9a4
--- /dev/null
+++ b/frontend/app/shared/components/forms/references-tags.component.html
@@ -0,0 +1,3 @@
+<sqx-tag-editor placeholder=", to add reference" [converter]="snapshot.converter" [formControl]="selectionControl"
+    [suggestedValues]="snapshot.converter.suggestions">
+</sqx-tag-editor>
\ No newline at end of file
diff --git a/frontend/app/shared/components/forms/references-tags.component.scss b/frontend/app/shared/components/forms/references-tags.component.scss
new file mode 100644
index 000000000..103b9730a
--- /dev/null
+++ b/frontend/app/shared/components/forms/references-tags.component.scss
@@ -0,0 +1,3 @@
+.truncate {
+    min-height: 1.5rem;
+}
\ No newline at end of file
diff --git a/frontend/app/shared/components/references-tags.component.ts b/frontend/app/shared/components/forms/references-tags.component.ts
similarity index 92%
rename from frontend/app/shared/components/references-tags.component.ts
rename to frontend/app/shared/components/forms/references-tags.component.ts
index cb67ed841..0f4280f2f 100644
--- a/frontend/app/shared/components/references-tags.component.ts
+++ b/frontend/app/shared/components/forms/references-tags.component.ts
@@ -71,17 +71,11 @@ interface State {
 
 @Component({
     selector: 'sqx-references-tags',
-    template: `
-        <sqx-tag-editor placeholder=", to add reference" [converter]="snapshot.converter" [formControl]="selectionControl"
-            [suggestedValues]="snapshot.converter.suggestions">
-        </sqx-tag-editor>
-    `,
-    styles: [`
-        .truncate {
-            min-height: 1.5rem;
-        }`
+    styleUrls: ['./references-tags.component.scss'],
+    templateUrl: './references-tags.component.html',
+    providers: [
+        SQX_REFERENCES_TAGS_CONTROL_VALUE_ACCESSOR
     ],
-    providers: [SQX_REFERENCES_TAGS_CONTROL_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ReferencesTagsComponent extends StatefulControlComponent<State, ReadonlyArray<string>> implements OnChanges {
diff --git a/frontend/app/shared/components/rich-editor.component.html b/frontend/app/shared/components/forms/rich-editor.component.html
similarity index 100%
rename from frontend/app/shared/components/rich-editor.component.html
rename to frontend/app/shared/components/forms/rich-editor.component.html
diff --git a/frontend/app/shared/components/rich-editor.component.scss b/frontend/app/shared/components/forms/rich-editor.component.scss
similarity index 65%
rename from frontend/app/shared/components/rich-editor.component.scss
rename to frontend/app/shared/components/forms/rich-editor.component.scss
index 401bc5174..019b776fd 100644
--- a/frontend/app/shared/components/rich-editor.component.scss
+++ b/frontend/app/shared/components/forms/rich-editor.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 .drop-container {
     min-height: 401px;
 }
diff --git a/frontend/app/shared/components/rich-editor.component.ts b/frontend/app/shared/components/forms/rich-editor.component.ts
similarity index 99%
rename from frontend/app/shared/components/rich-editor.component.ts
rename to frontend/app/shared/components/forms/rich-editor.component.ts
index 216272047..c603a1bc5 100644
--- a/frontend/app/shared/components/rich-editor.component.ts
+++ b/frontend/app/shared/components/forms/rich-editor.component.ts
@@ -38,7 +38,9 @@ const ImageTypes: ReadonlyArray<any> = [
     selector: 'sqx-rich-editor',
     styleUrls: ['./rich-editor.component.scss'],
     templateUrl: './rich-editor.component.html',
-    providers: [SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR],
+    providers: [
+        SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RichEditorComponent extends StatefulControlComponent<undefined, string> implements AfterViewInit, OnDestroy {
diff --git a/frontend/app/shared/components/help.component.scss b/frontend/app/shared/components/help.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/shared/components/help.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/shared/components/help-markdown.pipe.spec.ts b/frontend/app/shared/components/help/help-markdown.pipe.spec.ts
similarity index 100%
rename from frontend/app/shared/components/help-markdown.pipe.spec.ts
rename to frontend/app/shared/components/help/help-markdown.pipe.spec.ts
diff --git a/frontend/app/shared/components/help-markdown.pipe.ts b/frontend/app/shared/components/help/help-markdown.pipe.ts
similarity index 100%
rename from frontend/app/shared/components/help-markdown.pipe.ts
rename to frontend/app/shared/components/help/help-markdown.pipe.ts
diff --git a/frontend/app/shared/components/help.component.html b/frontend/app/shared/components/help/help.component.html
similarity index 100%
rename from frontend/app/shared/components/help.component.html
rename to frontend/app/shared/components/help/help.component.html
diff --git a/frontend/app/shared/components/help/help.component.scss b/frontend/app/shared/components/help/help.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shared/components/help.component.ts b/frontend/app/shared/components/help/help.component.ts
similarity index 100%
rename from frontend/app/shared/components/help.component.ts
rename to frontend/app/shared/components/help/help.component.ts
diff --git a/frontend/app/shared/components/history.component.scss b/frontend/app/shared/components/history.component.scss
deleted file mode 100644
index fbb752506..000000000
--- a/frontend/app/shared/components/history.component.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/shared/components/history-list.component.html b/frontend/app/shared/components/history/history-list.component.html
similarity index 100%
rename from frontend/app/shared/components/history-list.component.html
rename to frontend/app/shared/components/history/history-list.component.html
diff --git a/frontend/app/shared/components/history-list.component.scss b/frontend/app/shared/components/history/history-list.component.scss
similarity index 91%
rename from frontend/app/shared/components/history-list.component.scss
rename to frontend/app/shared/components/history/history-list.component.scss
index 8661d69ba..4259fe2f0 100644
--- a/frontend/app/shared/components/history-list.component.scss
+++ b/frontend/app/shared/components/history/history-list.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 :host ::ng-deep {
     .user-ref {
         font-weight: 500;
diff --git a/frontend/app/shared/components/history-list.component.ts b/frontend/app/shared/components/history/history-list.component.ts
similarity index 100%
rename from frontend/app/shared/components/history-list.component.ts
rename to frontend/app/shared/components/history/history-list.component.ts
diff --git a/frontend/app/shared/components/history.component.html b/frontend/app/shared/components/history/history.component.html
similarity index 100%
rename from frontend/app/shared/components/history.component.html
rename to frontend/app/shared/components/history/history.component.html
diff --git a/frontend/app/shared/components/history/history.component.scss b/frontend/app/shared/components/history/history.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shared/components/history.component.ts b/frontend/app/shared/components/history/history.component.ts
similarity index 100%
rename from frontend/app/shared/components/history.component.ts
rename to frontend/app/shared/components/history/history.component.ts
diff --git a/frontend/app/shared/components/history/pipes.ts b/frontend/app/shared/components/history/pipes.ts
new file mode 100644
index 000000000..57e896769
--- /dev/null
+++ b/frontend/app/shared/components/history/pipes.ts
@@ -0,0 +1,61 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+// tslint:disable:no-pipe-impure
+
+import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import {
+    formatHistoryMessage,
+    HistoryEventDto,
+    UsersProviderService
+} from '@app/shared/internal';
+
+@Pipe({
+    name: 'sqxHistoryMessage',
+    pure: false
+})
+export class HistoryMessagePipe implements OnDestroy, PipeTransform {
+    private subscription: Subscription;
+    private lastMessage: string;
+    private lastValue: string | null = null;
+
+    constructor(
+        private readonly changeDetector: ChangeDetectorRef,
+        private readonly users: UsersProviderService
+    ) {
+    }
+
+    public ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+
+    public transform(event: HistoryEventDto): string | null {
+        if (!event) {
+            return this.lastValue;
+        }
+
+        if (this.lastMessage !== event.message) {
+            this.lastMessage = event.message;
+
+            if (this.subscription) {
+                this.subscription.unsubscribe();
+            }
+
+            this.subscription =  formatHistoryMessage(event.message, this.users).subscribe(value => {
+                this.lastValue = value;
+
+                this.changeDetector.markForCheck();
+            });
+        }
+
+        return this.lastValue;
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/shared/components/pipes.ts b/frontend/app/shared/components/pipes.ts
index 00f9c32ff..37c0fec96 100644
--- a/frontend/app/shared/components/pipes.ts
+++ b/frontend/app/shared/components/pipes.ts
@@ -13,58 +13,10 @@ import { map } from 'rxjs/operators';
 
 import {
     ApiUrlConfig,
-    AssetDto,
-    formatHistoryMessage,
-    HistoryEventDto,
-    MathHelper,
     UserDto,
     UsersProviderService
 } from '@app/shared/internal';
 
-@Pipe({
-    name: 'sqxHistoryMessage',
-    pure: false
-})
-export class HistoryMessagePipe implements OnDestroy, PipeTransform {
-    private subscription: Subscription;
-    private lastMessage: string;
-    private lastValue: string | null = null;
-
-    constructor(
-        private readonly changeDetector: ChangeDetectorRef,
-        private readonly users: UsersProviderService
-    ) {
-    }
-
-    public ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-
-    public transform(event: HistoryEventDto): string | null {
-        if (!event) {
-            return this.lastValue;
-        }
-
-        if (this.lastMessage !== event.message) {
-            this.lastMessage = event.message;
-
-            if (this.subscription) {
-                this.subscription.unsubscribe();
-            }
-
-            this.subscription =  formatHistoryMessage(event.message, this.users).subscribe(value => {
-                this.lastValue = value;
-
-                this.changeDetector.markForCheck();
-            });
-        }
-
-        return this.lastValue;
-    }
-}
-
 class UserAsyncPipe implements OnDestroy {
     private lastUserId: string;
     private lastValue: string | undefined = undefined;
@@ -219,67 +171,6 @@ export class UserPictureRefPipe extends UserAsyncPipe implements PipeTransform {
     }
 }
 
-@Pipe({
-    name: 'sqxAssetUrl',
-    pure: true
-})
-export class AssetUrlPipe implements PipeTransform {
-    constructor(
-        private readonly apiUrl: ApiUrlConfig
-    ) {
-    }
-
-    public transform(asset: AssetDto): string {
-        return `${asset.fullUrl(this.apiUrl)}&sq=${MathHelper.guid()}`;
-    }
-}
-
-@Pipe({
-    name: 'sqxAssetPreviewUrl',
-    pure: true
-})
-export class AssetPreviewUrlPipe implements PipeTransform {
-    constructor(
-        private readonly apiUrl: ApiUrlConfig
-    ) {
-    }
-
-    public transform(asset: AssetDto): string {
-        return asset.fullUrl(this.apiUrl);
-    }
-}
-
-@Pipe({
-    name: 'sqxFileIcon',
-    pure: true
-})
-export class FileIconPipe implements PipeTransform {
-    public transform(asset: { mimeType: string, fileType: string }): string {
-        const knownTypes = [
-            'doc',
-            'docx',
-            'pdf',
-            'ppt',
-            'pptx',
-            'video',
-            'xls',
-            'xlsx'
-        ];
-
-        let mimeIcon: string;
-
-        const mimeParts = asset.mimeType.split('/');
-
-        if (mimeParts.length === 2 && mimeParts[0].toLowerCase() === 'video') {
-            mimeIcon = 'video';
-        } else {
-            mimeIcon = knownTypes.indexOf(asset.fileType) >= 0 ? asset.fileType : 'generic';
-        }
-
-        return `./images/asset_${mimeIcon}.svg`;
-    }
-}
-
 function split(token: string) {
     const index = token.indexOf(':');
 
diff --git a/frontend/app/shared/components/queries/query-path.component.ts b/frontend/app/shared/components/queries/query-path.component.ts
deleted file mode 100644
index 6d152cf4c..000000000
--- a/frontend/app/shared/components/queries/query-path.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { QueryModel } from '@app/shared/internal';
-
-@Component({
-    selector: 'sqx-query-path',
-    template: `
-        <sqx-dropdown [items]="model.fields | sqxKeys" [ngModel]="path" (ngModelChange)="pathChange.emit($event)" [canSearch]="false" separated="true">
-            <ng-template let-field="$implicit">
-                <div class="row">
-                    <div class="col-auto">
-                        <div class="badge badge-pill badge-primary">{{model.fields[field].displayName}}</div>
-                    </div>
-                    <div class="col text-right">
-                        <small class="text-muted">{{model.fields[field].description}}</small>
-                    </div>
-                </div>
-            </ng-template>
-
-            <ng-template let-field="$implicit">
-                {{model.fields[field].displayName}}
-            </ng-template>
-        </sqx-dropdown>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class QueryPathComponent {
-    @Output()
-    public pathChange = new EventEmitter<string>();
-
-    @Input()
-    public path: string;
-
-    @Input()
-    public model: QueryModel;
-}
\ No newline at end of file
diff --git a/frontend/app/shared/components/saved-queries.component.ts b/frontend/app/shared/components/saved-queries.component.ts
deleted file mode 100644
index d252e575b..000000000
--- a/frontend/app/shared/components/saved-queries.component.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { Queries } from '@app/shared/internal';
-import { SavedQuery } from '../state/queries';
-
-@Component({
-    selector: 'sqx-shared-queries',
-    template: `
-        <div class="sidebar-section">
-            <h3>Shared queries</h3>
-
-            <ng-container *ngIf="queries.queriesShared | async; let queryList">
-                <ng-container *ngIf="queryList.length > 0; else noQuery">
-                    <a class="sidebar-item" *ngFor="let saved of queryList; trackBy: trackByQuery" (click)="search.emit(saved)"
-                        [class.active]="isSelectedQuery(saved)">
-
-                        {{saved.name}}
-
-                        <a class="sidebar-item-remove float-right" (click)="queries.removeShared(saved)" sqxStopClick>
-                            <i class="icon-close"></i>
-                        </a>
-                    </a>
-                </ng-container>
-
-                <ng-template #noQuery>
-                    <div class="sidebar-item inactive text-muted">
-                        Search for {{types}} and use <i class="icon-star-empty"></i> icon in search form to save query for all contributors.
-                    </div>
-                </ng-template>
-            </ng-container>
-        </div>
-
-        <hr />
-
-        <div class="sidebar-section">
-            <h3>My queries</h3>
-
-            <ng-container *ngIf="queries.queriesUser | async; let queryList">
-                <ng-container *ngIf="queryList.length > 0; else noQuery">
-                    <a class="sidebar-item" *ngFor="let saved of queryList; trackBy: trackByQuery" (click)="search.emit(saved)"
-                        [class.active]="isSelectedQuery(saved)">
-
-                        {{saved.name}}
-
-                        <a class="sidebar-item-remove float-right" (click)="queries.removeUser(saved)" sqxStopClick>
-                            <i class="icon-close"></i>
-                        </a>
-                    </a>
-                </ng-container>
-
-                <ng-template #noQuery>
-                    <div class="sidebar-item inactive text-muted">
-                        Search for {{types}} and use <i class="icon-star-empty"></i> icon in search form to save query for yourself.
-                    </div>
-                </ng-template>
-            </ng-container>
-        </div>
-    `
-})
-export class SavedQueriesComponent {
-    @Output()
-    public search = new EventEmitter<SavedQuery>();
-
-    @Input()
-    public queryUsed: (saved: SavedQuery) => boolean;
-
-    @Input()
-    public queries: Queries;
-
-    @Input()
-    public types: string;
-
-    public isSelectedQuery(saved: SavedQuery) {
-        return this.queryUsed && this.queryUsed(saved);
-    }
-
-    public trackByQuery(index: number, query: { name: string }) {
-        return query.name;
-    }
-}
\ No newline at end of file
diff --git a/frontend/app/shared/components/schema-category.component.scss b/frontend/app/shared/components/schema-category.component.scss
index 788d596ac..45155b172 100644
--- a/frontend/app/shared/components/schema-category.component.scss
+++ b/frontend/app/shared/components/schema-category.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 $drag-margin: -8px;
 
 .col {
diff --git a/frontend/app/shared/components/schema-category.component.ts b/frontend/app/shared/components/schema-category.component.ts
index 5dbc5f61b..c3f684b8c 100644
--- a/frontend/app/shared/components/schema-category.component.ts
+++ b/frontend/app/shared/components/schema-category.component.ts
@@ -98,10 +98,6 @@ export class SchemaCategoryComponent extends StatefulComponent<State> implements
         }
     }
 
-    public emitRemove() {
-        this.remove.emit();
-    }
-
     public trackBySchema(index: number, schema: SchemaDto) {
         return schema.id;
     }
diff --git a/frontend/app/shared/components/queries/filter-comparison.component.html b/frontend/app/shared/components/search/queries/filter-comparison.component.html
similarity index 99%
rename from frontend/app/shared/components/queries/filter-comparison.component.html
rename to frontend/app/shared/components/search/queries/filter-comparison.component.html
index e9adbf7fe..569b59f07 100644
--- a/frontend/app/shared/components/queries/filter-comparison.component.html
+++ b/frontend/app/shared/components/search/queries/filter-comparison.component.html
@@ -61,7 +61,7 @@
         </ng-container>
     </div>
     <div class="col-auto pl-2">
-        <button type="button" class="btn btn-text-danger" (click)="emitRemove()">
+        <button type="button" class="btn btn-text-danger" (click)="remove.emit()">
             <i class="icon-bin2"></i>
         </button>
     </div>
diff --git a/frontend/app/shared/components/queries/filter-comparison.component.scss b/frontend/app/shared/components/search/queries/filter-comparison.component.scss
similarity index 60%
rename from frontend/app/shared/components/queries/filter-comparison.component.scss
rename to frontend/app/shared/components/search/queries/filter-comparison.component.scss
index fe19e6460..16d712984 100644
--- a/frontend/app/shared/components/queries/filter-comparison.component.scss
+++ b/frontend/app/shared/components/search/queries/filter-comparison.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .path {
     width: 10rem;
 }
diff --git a/frontend/app/shared/components/queries/filter-comparison.component.ts b/frontend/app/shared/components/search/queries/filter-comparison.component.ts
similarity index 97%
rename from frontend/app/shared/components/queries/filter-comparison.component.ts
rename to frontend/app/shared/components/search/queries/filter-comparison.component.ts
index acba843f1..13227c73e 100644
--- a/frontend/app/shared/components/queries/filter-comparison.component.ts
+++ b/frontend/app/shared/components/search/queries/filter-comparison.component.ts
@@ -100,10 +100,6 @@ export class FilterComparisonComponent implements OnChanges {
         this.fieldModel = newModel;
     }
 
-    public emitRemove() {
-        this.remove.emit();
-    }
-
     public emitChange() {
         this.change.emit();
     }
diff --git a/frontend/app/shared/components/queries/filter-logical.component.html b/frontend/app/shared/components/search/queries/filter-logical.component.html
similarity index 98%
rename from frontend/app/shared/components/queries/filter-logical.component.html
rename to frontend/app/shared/components/search/queries/filter-logical.component.html
index 4ab99e218..73f5b4dc7 100644
--- a/frontend/app/shared/components/queries/filter-logical.component.html
+++ b/frontend/app/shared/components/search/queries/filter-logical.component.html
@@ -13,7 +13,7 @@
 
         
         <div class="col-auto pl-2" *ngIf="!isRoot">
-            <button type="button" class="btn btn-text-danger" (click)="emitRemove()">
+            <button type="button" class="btn btn-text-danger" (click)="remove.emit()">
                 <i class="icon-bin2"></i>
             </button>
         </div>
diff --git a/frontend/app/shared/components/queries/filter-logical.component.scss b/frontend/app/shared/components/search/queries/filter-logical.component.scss
similarity index 93%
rename from frontend/app/shared/components/queries/filter-logical.component.scss
rename to frontend/app/shared/components/search/queries/filter-logical.component.scss
index fa3b05e02..ba1c798e6 100644
--- a/frontend/app/shared/components/queries/filter-logical.component.scss
+++ b/frontend/app/shared/components/search/queries/filter-logical.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 $field-line: #e1e8ef;
 
 .filters {
diff --git a/frontend/app/shared/components/queries/filter-logical.component.ts b/frontend/app/shared/components/search/queries/filter-logical.component.ts
similarity index 97%
rename from frontend/app/shared/components/queries/filter-logical.component.ts
rename to frontend/app/shared/components/search/queries/filter-logical.component.ts
index 768c12576..bf4b5ad4a 100644
--- a/frontend/app/shared/components/queries/filter-logical.component.ts
+++ b/frontend/app/shared/components/search/queries/filter-logical.component.ts
@@ -108,10 +108,6 @@ export class FilterLogicalComponent {
         }
     }
 
-    public emitRemove() {
-        this.remove.emit();
-    }
-
     public emitChange() {
         this.change.emit();
     }
diff --git a/frontend/app/shared/components/search/queries/filter-node.component.html b/frontend/app/shared/components/search/queries/filter-node.component.html
new file mode 100644
index 000000000..78a3332be
--- /dev/null
+++ b/frontend/app/shared/components/search/queries/filter-node.component.html
@@ -0,0 +1,11 @@
+<ng-container *ngIf="logical">
+    <sqx-filter-logical [model]="model" [filter]="logical" [language]="language" [level]="level"
+        (remove)="remove.emit()" (change)="change.emit()">
+    </sqx-filter-logical>
+</ng-container>
+
+<ng-container *ngIf="comparison">
+    <sqx-filter-comparison [model]="model" [filter]="comparison" [language]="language"
+        (remove)="remove.emit()" (change)="change.emit()">
+    </sqx-filter-comparison>
+</ng-container>
\ No newline at end of file
diff --git a/frontend/app/shared/components/search/queries/filter-node.component.scss b/frontend/app/shared/components/search/queries/filter-node.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shared/components/queries/filter-node.component.ts b/frontend/app/shared/components/search/queries/filter-node.component.ts
similarity index 65%
rename from frontend/app/shared/components/queries/filter-node.component.ts
rename to frontend/app/shared/components/search/queries/filter-node.component.ts
index 53dd147b2..6d71635a3 100644
--- a/frontend/app/shared/components/queries/filter-node.component.ts
+++ b/frontend/app/shared/components/search/queries/filter-node.component.ts
@@ -17,19 +17,8 @@ import {
 
 @Component({
     selector: 'sqx-filter-node',
-    template: `
-        <ng-container *ngIf="logical">
-            <sqx-filter-logical [model]="model" [filter]="logical" [language]="language" [level]="level"
-                (remove)="remove.emit()" (change)="change.emit()">
-            </sqx-filter-logical>
-        </ng-container>
-
-        <ng-container *ngIf="comparison">
-            <sqx-filter-comparison [model]="model" [filter]="comparison" [language]="language"
-                (remove)="remove.emit()" (change)="change.emit()">
-            </sqx-filter-comparison>
-        </ng-container>
-    `,
+    styleUrls: ['./filter-node.component.scss'],
+    templateUrl: './filter-node.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FilterNodeComponent {
diff --git a/frontend/app/shared/components/search/queries/query-path.component.html b/frontend/app/shared/components/search/queries/query-path.component.html
new file mode 100644
index 000000000..34b9c33fc
--- /dev/null
+++ b/frontend/app/shared/components/search/queries/query-path.component.html
@@ -0,0 +1,16 @@
+<sqx-dropdown [items]="model.fields | sqxKeys" [ngModel]="path" (ngModelChange)="pathChange.emit($event)" [canSearch]="false" separated="true">
+    <ng-template let-field="$implicit">
+        <div class="row">
+            <div class="col-auto">
+                <div class="badge badge-pill badge-primary">{{model.fields[field].displayName}}</div>
+            </div>
+            <div class="col text-right">
+                <small class="text-muted">{{model.fields[field].description}}</small>
+            </div>
+        </div>
+    </ng-template>
+
+    <ng-template let-field="$implicit">
+        {{model.fields[field].displayName}}
+    </ng-template>
+</sqx-dropdown>
\ No newline at end of file
diff --git a/frontend/app/shared/components/search/queries/query-path.component.scss b/frontend/app/shared/components/search/queries/query-path.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shared/components/search/queries/query-path.component.ts b/frontend/app/shared/components/search/queries/query-path.component.ts
new file mode 100644
index 000000000..90faf1138
--- /dev/null
+++ b/frontend/app/shared/components/search/queries/query-path.component.ts
@@ -0,0 +1,27 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { QueryModel } from '@app/shared/internal';
+
+@Component({
+    selector: 'sqx-query-path',
+    styleUrls: ['./query-path.component.scss'],
+    templateUrl: './query-path.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class QueryPathComponent {
+    @Output()
+    public pathChange = new EventEmitter<string>();
+
+    @Input()
+    public path: string;
+
+    @Input()
+    public model: QueryModel;
+}
\ No newline at end of file
diff --git a/frontend/app/shared/components/search/queries/query.component.html b/frontend/app/shared/components/search/queries/query.component.html
new file mode 100644
index 000000000..63f85d7fd
--- /dev/null
+++ b/frontend/app/shared/components/search/queries/query.component.html
@@ -0,0 +1,15 @@
+<sqx-filter-logical isRoot="true" [filter]="queryValue.filter" [model]="model" [language]="language"
+    (change)="queryChange.emit()">
+</sqx-filter-logical>
+
+<h4 class="mt-4">Sorting</h4>
+
+<div class="mb-2" *ngFor="let sorting of queryValue.sort">
+    <sqx-sorting [sorting]="sorting" [model]="model"
+        (remove)="removeSorting(sorting)" (change)="queryChange.emit()">
+    </sqx-sorting>
+</div>
+
+<button class="btn btn-outline-success btn-sm mr-2" (click)="addSorting()">
+    Add Sorting
+</button>
\ No newline at end of file
diff --git a/frontend/app/shared/components/search/queries/query.component.scss b/frontend/app/shared/components/search/queries/query.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shared/components/queries/query.component.ts b/frontend/app/shared/components/search/queries/query.component.ts
similarity index 50%
rename from frontend/app/shared/components/queries/query.component.ts
rename to frontend/app/shared/components/search/queries/query.component.ts
index 6eace549b..7f3e7ad4b 100644
--- a/frontend/app/shared/components/queries/query.component.ts
+++ b/frontend/app/shared/components/search/queries/query.component.ts
@@ -11,28 +11,14 @@ import {
     LanguageDto,
     Query,
     QueryModel,
-    QuerySorting
+    QuerySorting,
+    Types
 } from '@app/shared/internal';
 
 @Component({
     selector: 'sqx-query',
-    template: `
-        <sqx-filter-logical isRoot="true" [filter]="queryValue.filter" [model]="model" [language]="language"
-            (change)="emitQueryChange()">
-        </sqx-filter-logical>
-
-        <h4 class="mt-4">Sorting</h4>
-
-        <div class="mb-2" *ngFor="let sorting of queryValue.sort">
-            <sqx-sorting [sorting]="sorting" [model]="model"
-                (remove)="removeSorting(sorting)" (change)="emitQueryChange()">
-            </sqx-sorting>
-        </div>
-
-        <button class="btn btn-outline-success btn-sm mr-2" (click)="addSorting()">
-            Add Sorting
-        </button>
-    `,
+    styleUrls: ['./query.component.scss'],
+    templateUrl: './query.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class QueryComponent {
@@ -47,30 +33,10 @@ export class QueryComponent {
 
     @Input()
     public set query(query: Query) {
-        if (!query) {
-            query = {};
-        }
-
-        if (query) {
-            if (!query.filter) {
-                query.filter = {
-                    and: []
-                };
-            }
-
-            if (!query.sort) {
-                query.sort = [];
-            }
-
-            this.queryValue = query;
-        }
+        this.queryValue = Types.clone(query);
     }
 
-    public queryValue: Query;
-
-    constructor() {
-        this.query = {};
-    }
+    public queryValue: Query = {};
 
     public addSorting() {
         this.queryValue.sort!.push({ path: Object.keys(this.model.fields)[0], order: 'ascending' });
diff --git a/frontend/app/shared/components/search/queries/sorting.component.html b/frontend/app/shared/components/search/queries/sorting.component.html
new file mode 100644
index 000000000..3d7d62b6a
--- /dev/null
+++ b/frontend/app/shared/components/search/queries/sorting.component.html
@@ -0,0 +1,21 @@
+<div class="row">
+    <div class="col">
+        <div class="form-inline">
+            <sqx-query-path
+                (pathChange)="changePath($event)"
+                [path]="sorting.path"
+                [model]="model">
+            </sqx-query-path>
+
+            <select class="form-control ml-1" [ngModel]="sorting.order" (ngModelChange)="changeOrder($event)">
+                <option>ascending</option>
+                <option>descending</option>
+            </select>
+        </div>
+    </div>
+    <div class="col-auto pl-2">
+        <button type="button" class="btn btn-text-danger" (click)="remove.emit()">
+            <i class="icon-bin2"></i>
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/app/shared/components/search/queries/sorting.component.scss b/frontend/app/shared/components/search/queries/sorting.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shared/components/queries/sorting.component.ts b/frontend/app/shared/components/search/queries/sorting.component.ts
similarity index 50%
rename from frontend/app/shared/components/queries/sorting.component.ts
rename to frontend/app/shared/components/search/queries/sorting.component.ts
index ccb337fc5..21ff5b97d 100644
--- a/frontend/app/shared/components/queries/sorting.component.ts
+++ b/frontend/app/shared/components/search/queries/sorting.component.ts
@@ -11,29 +11,8 @@ import { QueryModel, QuerySorting } from '@app/shared/internal';
 
  @Component({
      selector: 'sqx-sorting',
-     template: `
-        <div class="row">
-            <div class="col">
-                <div class="form-inline">
-                    <sqx-query-path
-                        (pathChange)="changePath($event)"
-                        [path]="sorting.path"
-                        [model]="model">
-                    </sqx-query-path>
-
-                    <select class="form-control ml-1" [ngModel]="sorting.order" (ngModelChange)="changeOrder($event)">
-                        <option>ascending</option>
-                        <option>descending</option>
-                    </select>
-                </div>
-            </div>
-            <div class="col-auto pl-2">
-                <button type="button" class="btn btn-text-danger" (click)="remove.emit()">
-                    <i class="icon-bin2"></i>
-                </button>
-            </div>
-        </div>
-    `,
+     styleUrls: ['./sorting.component.scss'],
+     templateUrl: './sorting.component.html',
      changeDetection: ChangeDetectionStrategy.OnPush
  })
 export class SortingComponent {
diff --git a/frontend/app/shared/components/search/query-list.component.html b/frontend/app/shared/components/search/query-list.component.html
new file mode 100644
index 000000000..1f86f38d4
--- /dev/null
+++ b/frontend/app/shared/components/search/query-list.component.html
@@ -0,0 +1,17 @@
+<ng-container *ngIf="queries.length > 0; else noQuery">
+    <a class="sidebar-item" *ngFor="let saved of queries; trackBy: trackByQuery" (click)="search.emit(saved.query)"
+        [class.active]="isSelectedQuery(saved)">
+
+        <i class="icon-circle" [style.color]="saved.color" [class.hidden]="!saved.color"></i> {{saved.name}}
+
+        <a class="sidebar-item-remove float-right" (click)="remove.emit(saved)" *ngIf="canRemove" sqxStopClick>
+            <i class="icon-close"></i>
+        </a>
+    </a>
+</ng-container>
+
+<ng-template #noQuery>
+    <div class="sidebar-item inactive text-muted" *ngIf="canRemove">
+        Search for {{types}} and use <i class="icon-star-empty"></i> icon in search form to save query for all contributors.
+    </div>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/app/shared/components/search/query-list.component.scss b/frontend/app/shared/components/search/query-list.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shared/components/search/query-list.component.ts b/frontend/app/shared/components/search/query-list.component.ts
new file mode 100644
index 000000000..1244d585e
--- /dev/null
+++ b/frontend/app/shared/components/search/query-list.component.ts
@@ -0,0 +1,48 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+import {
+    equalsQuery,
+    Query,
+    SavedQuery
+} from '@app/shared/internal';
+
+@Component({
+    selector: 'sqx-query-list',
+    styleUrls: ['./query-list.component.scss'],
+    templateUrl: './query-list.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class QueryListComponent {
+    @Output()
+    public search = new EventEmitter<Query>();
+
+    @Output()
+    public remove = new EventEmitter<SavedQuery>();
+
+    @Input()
+    public queryUsed: Query | undefined;
+
+    @Input()
+    public queries: ReadonlyArray<SavedQuery>;
+
+    @Input()
+    public canRemove: boolean;
+
+    @Input()
+    public types: string;
+
+    public isSelectedQuery(saved: SavedQuery) {
+        return equalsQuery(saved.query, this.queryUsed);
+    }
+
+    public trackByQuery(index: number, query: SavedQuery) {
+        return query.name;
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/shared/components/search-form.component.html b/frontend/app/shared/components/search/search-form.component.html
similarity index 98%
rename from frontend/app/shared/components/search-form.component.html
rename to frontend/app/shared/components/search/search-form.component.html
index edc559fce..1c9e1d5c8 100644
--- a/frontend/app/shared/components/search-form.component.html
+++ b/frontend/app/shared/components/search/search-form.component.html
@@ -41,7 +41,7 @@
 </sqx-onboarding-tooltip>
 
 <ng-container *sqxModal="searchDialog">
-    <sqx-modal-dialog (close)="searchDialog.hide()" large="true">
+    <sqx-modal-dialog (close)="searchDialog.hide()" size="lg">
         <ng-container title>
             Custom Query
         </ng-container>
diff --git a/frontend/app/shared/components/search-form.component.scss b/frontend/app/shared/components/search/search-form.component.scss
similarity index 95%
rename from frontend/app/shared/components/search-form.component.scss
rename to frontend/app/shared/components/search/search-form.component.scss
index a0c532932..e6f35bf63 100644
--- a/frontend/app/shared/components/search-form.component.scss
+++ b/frontend/app/shared/components/search/search-form.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .search-form {
     display: inline-block;
 }
diff --git a/frontend/app/shared/components/search-form.component.ts b/frontend/app/shared/components/search/search-form.component.ts
similarity index 100%
rename from frontend/app/shared/components/search-form.component.ts
rename to frontend/app/shared/components/search/search-form.component.ts
diff --git a/frontend/app/shared/components/search/shared-queries.component.html b/frontend/app/shared/components/search/shared-queries.component.html
new file mode 100644
index 000000000..a21679dec
--- /dev/null
+++ b/frontend/app/shared/components/search/shared-queries.component.html
@@ -0,0 +1,25 @@
+<div class="sidebar-section">
+    <h3>Shared queries</h3>
+
+    <sqx-query-list
+        [canRemove]="true"
+        [queryUsed]="queryUsed"
+        [queries]="queries.queriesShared | async"
+        (search)="search.emit($event)"
+        (remove)="queries.removeShared($event)">
+    </sqx-query-list>
+</div>
+
+<hr />
+
+<div class="sidebar-section">
+    <h3>My queries</h3>
+
+    <sqx-query-list
+        [canRemove]="true"
+        [queryUsed]="queryUsed"
+        [queries]="queries.queriesUser | async"
+        (search)="search.emit($event)"
+        (remove)="queries.removeUser($event)">
+    </sqx-query-list>
+</div>
\ No newline at end of file
diff --git a/frontend/app/shared/components/search/shared-queries.component.scss b/frontend/app/shared/components/search/shared-queries.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shared/components/search/shared-queries.component.ts b/frontend/app/shared/components/search/shared-queries.component.ts
new file mode 100644
index 000000000..83d1e4c0f
--- /dev/null
+++ b/frontend/app/shared/components/search/shared-queries.component.ts
@@ -0,0 +1,30 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { Queries, Query } from '@app/shared/internal';
+
+@Component({
+    selector: 'sqx-shared-queries',
+    styleUrls: ['./shared-queries.component.scss'],
+    templateUrl: './shared-queries.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SavedQueriesComponent {
+    @Output()
+    public search = new EventEmitter<Query>();
+
+    @Input()
+    public queryUsed: Query;
+
+    @Input()
+    public queries: Queries;
+
+    @Input()
+    public types: string;
+}
\ No newline at end of file
diff --git a/frontend/app/shared/components/table-header.component.html b/frontend/app/shared/components/table-header.component.html
new file mode 100644
index 000000000..a2ce0143e
--- /dev/null
+++ b/frontend/app/shared/components/table-header.component.html
@@ -0,0 +1,12 @@
+<a *ngIf="sortable; else notSortable" (click)="sort()" class="pointer truncate">
+    <span class="truncate">
+        <i *ngIf="order === 'ascending'" class="icon-caret-down"></i>
+        <i *ngIf="order === 'descending'" class="icon-caret-up"></i>
+
+        {{text}}
+    </span>
+</a>
+
+<ng-template #notSortable>
+    <span class="truncate">{{text}}</span>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/app/shared/components/table-header.component.scss b/frontend/app/shared/components/table-header.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shared/components/table-header.component.ts b/frontend/app/shared/components/table-header.component.ts
index aa5045ef8..1beb901ac 100644
--- a/frontend/app/shared/components/table-header.component.ts
+++ b/frontend/app/shared/components/table-header.component.ts
@@ -10,25 +10,14 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Out
 import {
     LanguageDto,
     Query,
-    SortMode
+    SortMode,
+    Types
 } from '@app/shared/internal';
 
 @Component({
     selector: 'sqx-table-header',
-    template: `
-        <a *ngIf="sortable; else notSortable" (click)="sort()" class="pointer truncate">
-            <span class="truncate">
-                <i *ngIf="order === 'ascending'" class="icon-caret-down"></i>
-                <i *ngIf="order === 'descending'" class="icon-caret-up"></i>
-
-                {{text}}
-            </span>
-        </a>
-
-        <ng-template #notSortable>
-            <span class="truncate">{{text}}</span>
-        </ng-template>
-    `,
+    styleUrls: ['./table-header.component.scss'],
+    templateUrl: './table-header.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TableHeaderComponent implements OnChanges {
@@ -76,11 +65,13 @@ export class TableHeaderComponent implements OnChanges {
                 this.order = 'descending';
             }
 
-            this.queryChange.emit(this.newQuery());
-        }
-    }
+            const newQuery = Types.clone(this.query);
+
+            newQuery.sort = [
+                { path: this.fieldPath, order: this.order! }
+            ];
 
-    private newQuery() {
-        return {...this.query, sort: [{ path: this.fieldPath, order: this.order! }] };
+            this.queryChange.emit(newQuery);
+        }
     }
 }
\ No newline at end of file
diff --git a/frontend/app/shared/declarations.ts b/frontend/app/shared/declarations.ts
index 9a3b9cbcf..46e41b98c 100644
--- a/frontend/app/shared/declarations.ts
+++ b/frontend/app/shared/declarations.ts
@@ -6,38 +6,47 @@
  */
 
 export * from './components/app-form.component';
-export * from './components/asset-dialog.component';
-export * from './components/asset-folder.component';
-export * from './components/asset-folder-form.component';
-export * from './components/asset-path.component';
-export * from './components/asset-uploader.component';
-export * from './components/asset.component';
-export * from './components/assets-list.component';
-export * from './components/assets-selector.component';
-export * from './components/comment.component';
-export * from './components/comments.component';
-export * from './components/geolocation-editor.component';
-export * from './components/help-markdown.pipe';
-export * from './components/help.component';
-export * from './components/history-list.component';
-export * from './components/history.component';
-export * from './components/language-selector.component';
-export * from './components/markdown-editor.component';
 export * from './components/pipes';
-export * from './components/references-dropdown.component';
-export * from './components/references-tags.component';
-export * from './components/rich-editor.component';
-export * from './components/saved-queries.component';
 export * from './components/schema-category.component';
-export * from './components/search-form.component';
 export * from './components/table-header.component';
 
-export * from './components/queries/filter-comparison.component';
-export * from './components/queries/filter-logical.component';
-export * from './components/queries/filter-node.component';
-export * from './components/queries/query-path.component';
-export * from './components/queries/query.component';
-export * from './components/queries/sorting.component';
+export * from './components/assets/asset-dialog.component';
+export * from './components/assets/asset-folder-form.component';
+export * from './components/assets/asset-folder.component';
+export * from './components/assets/asset-path.component';
+export * from './components/assets/asset-uploader.component';
+export * from './components/assets/asset.component';
+export * from './components/assets/assets-list.component';
+export * from './components/assets/assets-selector.component';
+export * from './components/assets/image-editor.component';
+export * from './components/assets/pipes';
+
+export * from './components/comments/comment.component';
+export * from './components/comments/comments.component';
+
+export * from './components/forms/geolocation-editor.component';
+export * from './components/forms/language-selector.component';
+export * from './components/forms/markdown-editor.component';
+export * from './components/forms/references-dropdown.component';
+export * from './components/forms/references-tags.component';
+export * from './components/forms/rich-editor.component';
+
+export * from './components/help/help-markdown.pipe';
+export * from './components/help/help.component';
+
+export * from './components/history/history-list.component';
+export * from './components/history/history.component';
+export * from './components/history/pipes';
+
+export * from './components/search/queries/filter-comparison.component';
+export * from './components/search/queries/filter-logical.component';
+export * from './components/search/queries/filter-node.component';
+export * from './components/search/queries/query-path.component';
+export * from './components/search/queries/query.component';
+export * from './components/search/queries/sorting.component';
+export * from './components/search/query-list.component';
+export * from './components/search/search-form.component';
+export * from './components/search/shared-queries.component';
 
 export * from './guards/app-must-exist.guard';
 export * from './guards/content-must-exist.guard';
diff --git a/frontend/app/shared/module.ts b/frontend/app/shared/module.ts
index d205c5a73..98a0d5636 100644
--- a/frontend/app/shared/module.ts
+++ b/frontend/app/shared/module.ts
@@ -61,6 +61,7 @@ import {
     HistoryListComponent,
     HistoryMessagePipe,
     HistoryService,
+    ImageEditorComponent,
     LanguageSelectorComponent,
     LanguagesService,
     LanguagesState,
@@ -75,6 +76,7 @@ import {
     PlansService,
     PlansState,
     QueryComponent,
+    QueryListComponent,
     QueryPathComponent,
     ReferencesDropdownComponent,
     ReferencesTagsComponent,
@@ -145,9 +147,11 @@ import {
         HistoryComponent,
         HistoryListComponent,
         HistoryMessagePipe,
+        ImageEditorComponent,
         LanguageSelectorComponent,
         MarkdownEditorComponent,
         QueryComponent,
+        QueryListComponent,
         QueryPathComponent,
         ReferencesDropdownComponent,
         ReferencesTagsComponent,
@@ -188,6 +192,7 @@ import {
         HistoryMessagePipe,
         LanguageSelectorComponent,
         MarkdownEditorComponent,
+        QueryListComponent,
         ReferencesDropdownComponent,
         ReferencesTagsComponent,
         RichEditorComponent,
diff --git a/frontend/app/shared/services/assets.service.spec.ts b/frontend/app/shared/services/assets.service.spec.ts
index 9220633c9..bfd8af614 100644
--- a/frontend/app/shared/services/assets.service.spec.ts
+++ b/frontend/app/shared/services/assets.service.spec.ts
@@ -17,6 +17,7 @@ import {
     AssetsDto,
     AssetsService,
     DateTime,
+    encodeQuery,
     ErrorDto,
     MathHelper,
     Resource,
@@ -24,8 +25,6 @@ import {
     Version
 } from '@app/shared/internal';
 
-import { encodeQuery } from '../state/query';
-
 describe('AssetsService', () => {
     const version = new Version('1');
 
@@ -80,7 +79,9 @@ describe('AssetsService', () => {
             assets = result;
         });
 
-        const req = httpMock.expectOne(`http://service/p/api/apps/my-app/assets?q=${encodeQuery({ take: 17, skip: 13 })}`);
+        const query = { take: 17, skip: 13 };
+
+        const req = httpMock.expectOne(`http://service/p/api/apps/my-app/assets?q=${encodeQuery(query)}`);
 
         expect(req.request.method).toEqual('GET');
         expect(req.request.headers.get('If-Match')).toBeNull();
@@ -157,7 +158,9 @@ describe('AssetsService', () => {
 
         assetsService.getAssets('my-app', 17, 13, { fullText: 'my-query' }).subscribe();
 
-        const req = httpMock.expectOne(`http://service/p/api/apps/my-app/assets?q=${encodeQuery({ filter: { and: [{ path: 'fileName', op: 'contains', value: 'my-query' }] }, take: 17, skip: 13 })}`);
+        const query = { filter: { and: [{ path: 'fileName', op: 'contains', value: 'my-query' }] }, take: 17, skip: 13 };
+
+        const req = httpMock.expectOne(`http://service/p/api/apps/my-app/assets?q=${encodeQuery(query)}`);
 
         expect(req.request.method).toEqual('GET');
         expect(req.request.headers.get('If-Match')).toBeNull();
@@ -170,7 +173,9 @@ describe('AssetsService', () => {
 
         assetsService.getAssets('my-app', 17, 13, undefined, ['tag1']).subscribe();
 
-        const req = httpMock.expectOne(`http://service/p/api/apps/my-app/assets?q=${encodeQuery({ filter: { and: [{ path: 'tags', op: 'eq', value: 'tag1' }] }, take: 17, skip: 13 })}`);
+        const query = { filter: { and: [{ path: 'tags', op: 'eq', value: 'tag1' }] }, take: 17, skip: 13 };
+
+        const req = httpMock.expectOne(`http://service/p/api/apps/my-app/assets?q=${encodeQuery(query)}`);
 
         expect(req.request.method).toEqual('GET');
         expect(req.request.headers.get('If-Match')).toBeNull();
diff --git a/frontend/app/shared/services/contents.service.spec.ts b/frontend/app/shared/services/contents.service.spec.ts
index 27a57724b..d52702a55 100644
--- a/frontend/app/shared/services/contents.service.spec.ts
+++ b/frontend/app/shared/services/contents.service.spec.ts
@@ -21,7 +21,7 @@ import {
     Version,
     Versioned
 } from '@app/shared/internal';
-import { encodeQuery } from '../state/query';
+import { encodeQuery } from './../state/query';
 
 describe('ContentsService', () => {
     const version = new Version('1');
diff --git a/frontend/app/shared/services/workflows.service.spec.ts b/frontend/app/shared/services/workflows.service.spec.ts
index 46dbfc5e7..5b5a72148 100644
--- a/frontend/app/shared/services/workflows.service.spec.ts
+++ b/frontend/app/shared/services/workflows.service.spec.ts
@@ -20,7 +20,6 @@ import {
 } from '@app/shared/internal';
 
 describe('WorkflowsService', () => {
-
     const version = new Version('1');
 
     beforeEach(() => {
diff --git a/frontend/app/shared/state/apps.state.spec.ts b/frontend/app/shared/state/apps.state.spec.ts
index b85b7a1ae..5c115e1a2 100644
--- a/frontend/app/shared/state/apps.state.spec.ts
+++ b/frontend/app/shared/state/apps.state.spec.ts
@@ -15,7 +15,7 @@ import {
     DialogService
 } from '@app/shared/internal';
 
-import { createApp } from '../services/apps.service.spec';
+import { createApp } from './../services/apps.service.spec';
 
 describe('AppsState', () => {
     const app1 = createApp(1);
diff --git a/frontend/app/shared/state/apps.state.ts b/frontend/app/shared/state/apps.state.ts
index dbc60840e..830ac8bdc 100644
--- a/frontend/app/shared/state/apps.state.ts
+++ b/frontend/app/shared/state/apps.state.ts
@@ -162,7 +162,8 @@ export class AppsState extends State<Snapshot> {
         this.next(s => {
             const apps = s.apps.replaceBy('id', updated);
 
-            const selectedApp = s.selectedApp &&
+            const selectedApp =
+                s.selectedApp &&
                 s.selectedApp.id === app.id ?
                 updated :
                 s.selectedApp;
diff --git a/frontend/app/shared/state/assets.forms.ts b/frontend/app/shared/state/assets.forms.ts
index 81fb64861..90049637e 100644
--- a/frontend/app/shared/state/assets.forms.ts
+++ b/frontend/app/shared/state/assets.forms.ts
@@ -115,11 +115,11 @@ export class AnnotateAssetForm extends Form<FormGroup, AnnotateAssetDto, AssetDt
                 delete result.isProtected;
             }
 
-            if (Types.jsJsonEquals(result.metadata, asset.metadata)) {
+            if (Types.equals(result.metadata, asset.metadata)) {
                 delete result.metadata;
             }
 
-            if (Types.jsJsonEquals(result.tags, asset.tags)) {
+            if (Types.equals(result.tags, asset.tags)) {
                 delete result.tags;
             }
 
diff --git a/frontend/app/shared/state/assets.state.spec.ts b/frontend/app/shared/state/assets.state.spec.ts
index a5fad032b..103bfe93c 100644
--- a/frontend/app/shared/state/assets.state.spec.ts
+++ b/frontend/app/shared/state/assets.state.spec.ts
@@ -25,7 +25,6 @@ import {
 import { createAsset, createAssetFolder } from './../services/assets.service.spec';
 
 import { TestValues } from './_test-helpers';
-import { encodeQuery } from './query';
 
 describe('AssetsState', () => {
     const {
@@ -106,7 +105,7 @@ describe('AssetsState', () => {
             assetsState.toggleTag('tag1').subscribe();
             assetsState.toggleTag('tag1').subscribe();
 
-            expect(assetsState.isTagSelected('tag1')).toBeFalsy();
+            expect(assetsState.snapshot.tagsSelected).toEqual({});
         });
 
         it('should load without tags when tags reset', () => {
@@ -115,7 +114,7 @@ describe('AssetsState', () => {
 
             assetsState.resetTags().subscribe();
 
-            expect(assetsState.isTagSelectionEmpty()).toBeTruthy();
+            expect(assetsState.snapshot.tagsSelected).toEqual({});
         });
 
         it('should load with new pagination when paging', () => {
@@ -189,7 +188,7 @@ describe('AssetsState', () => {
 
             assetsState.toggleTag('tag1').subscribe();
 
-            expect(assetsState.isTagSelected('tag1')).toBeTruthy();
+            expect(assetsState.snapshot.tagsSelected).toEqual({ tag1: true });
         });
 
         it('should load with tags when tags selected', () => {
@@ -198,7 +197,7 @@ describe('AssetsState', () => {
 
             assetsState.selectTags(['tag1', 'tag2']).subscribe();
 
-            expect(assetsState.isTagSelected('tag1')).toBeTruthy();
+            expect(assetsState.snapshot.tagsSelected).toEqual({ tag1: true, tag2: true });
         });
 
         it('should load with query when searching', () => {
@@ -210,7 +209,6 @@ describe('AssetsState', () => {
             assetsState.search(query).subscribe();
 
             expect(assetsState.snapshot.assetsQuery).toEqual(query);
-            expect(assetsState.isQueryUsed({ name: 'name', query, queryJson: encodeQuery(query) })).toBeTruthy();
         });
     });
 
diff --git a/frontend/app/shared/state/assets.state.ts b/frontend/app/shared/state/assets.state.ts
index 712f2d7f3..1a7f9ad11 100644
--- a/frontend/app/shared/state/assets.state.ts
+++ b/frontend/app/shared/state/assets.state.ts
@@ -28,13 +28,13 @@ import {
 } from './../services/assets.service';
 
 import { AppsState } from './apps.state';
-import { SavedQuery } from './queries';
-import { encodeQuery, Query } from './query';
+import { Query } from './query';
 
 export type AssetPathItem = { id: string, folderName: string };
 
-type TagsAvailable = { [name: string]: number };
-type TagsSelected = { [name: string]: boolean };
+export type TagsAvailable = { [name: string]: number };
+export type TagsSelected = { [name: string]: boolean };
+export type Tag = { name: string, count: number; };
 
 const EMPTY_FOLDERS: { canCreate: boolean, items: ReadonlyArray<AssetFolderDto> } = { canCreate: false, items: [] };
 
@@ -59,9 +59,6 @@ interface Snapshot {
     // The query to filter assets.
     assetsQuery?: Query;
 
-    // The json of the assets query.
-    assetsQueryJson: string;
-
     // The folder path.
     path: ReadonlyArray<AssetPathItem>;
 
@@ -144,7 +141,6 @@ export class AssetsState extends State<Snapshot> {
             assetFolders: [],
             assets: [],
             assetsPager: Pager.fromLocalStore('assets', localStore, 30),
-            assetsQueryJson: '',
             path: ROOT_PATH,
             tagsAvailable: {},
             tagsSelected: {}
@@ -354,7 +350,6 @@ export class AssetsState extends State<Snapshot> {
 
             if (query !== null) {
                 newState.assetsQuery = query;
-                newState.assetsQueryJson = encodeQuery(query);
             }
 
             if (tags) {
@@ -422,18 +417,6 @@ export class AssetsState extends State<Snapshot> {
         return this.searchInternal(query);
     }
 
-    public isQueryUsed(saved: SavedQuery) {
-        return this.snapshot.assetsQueryJson === saved.queryJson;
-    }
-
-    public isTagSelected(tag: string) {
-        return this.snapshot.tagsSelected[tag];
-    }
-
-    public isTagSelectionEmpty() {
-        return Object.keys(this.snapshot.tagsSelected).length === 0;
-    }
-
     public get parentId() {
         return this.snapshot.path.length > 0 ? this.snapshot.path[this.snapshot.path.length - 1].id : undefined;
     }
diff --git a/frontend/app/shared/state/clients.state.spec.ts b/frontend/app/shared/state/clients.state.spec.ts
index 45cf9dac6..c235242f5 100644
--- a/frontend/app/shared/state/clients.state.spec.ts
+++ b/frontend/app/shared/state/clients.state.spec.ts
@@ -17,7 +17,7 @@ import {
     versioned
 } from '@app/shared/internal';
 
-import { createClients } from '../services/clients.service.spec';
+import { createClients } from './../services/clients.service.spec';
 
 import { TestValues } from './_test-helpers';
 
diff --git a/frontend/app/shared/state/contents.forms.ts b/frontend/app/shared/state/contents.forms.ts
index 6190c9360..20995de45 100644
--- a/frontend/app/shared/state/contents.forms.ts
+++ b/frontend/app/shared/state/contents.forms.ts
@@ -18,9 +18,9 @@ import {
     ValidatorsEx
 } from '@app/framework';
 
-import { ContentDto, ContentReferencesValue } from '../services/contents.service';
-import { LanguageDto } from '../services/languages.service';
 import { AppLanguageDto } from './../services/app-languages.service';
+import { ContentDto, ContentReferencesValue } from './../services/contents.service';
+import { LanguageDto } from './../services/languages.service';
 import { FieldDto, RootFieldDto, SchemaDetailsDto, TableField } from './../services/schemas.service';
 import {
     ArrayFieldPropertiesDto,
@@ -500,13 +500,13 @@ export class EditContentForm extends Form<FormGroup, any> {
     public hasChanged() {
         const currentValue = this.form.getRawValue();
 
-        return !Types.jsJsonEquals(this.initialData, currentValue);
+        return !Types.equals(this.initialData, currentValue);
     }
 
     public hasChanges(changes: any) {
         const currentValue = this.form.getRawValue();
 
-        return !Types.jsJsonEquals(changes, currentValue);
+        return !Types.equals(changes, currentValue);
     }
 
     public arrayItemRemove(field: RootFieldDto, language: AppLanguageDto, index: number) {
diff --git a/frontend/app/shared/state/contents.state.ts b/frontend/app/shared/state/contents.state.ts
index 32025ef2d..e41e6a4e2 100644
--- a/frontend/app/shared/state/contents.state.ts
+++ b/frontend/app/shared/state/contents.state.ts
@@ -24,7 +24,7 @@ import { ContentDto, ContentsService, StatusInfo } from './../services/contents.
 import { SchemaDto } from './../services/schemas.service';
 import { AppsState } from './apps.state';
 import { SavedQuery } from './queries';
-import { encodeQuery, Query } from './query';
+import { Query } from './query';
 import { SchemasState } from './schemas.state';
 
 interface Snapshot {
@@ -37,9 +37,6 @@ interface Snapshot {
     // The query to filter and sort contents.
     contentsQuery?: Query;
 
-    // The raw content query.
-    contentsQueryJson: string;
-
     // Indicates if the contents are loaded.
     isLoaded?: boolean;
 
@@ -97,7 +94,7 @@ export abstract class ContentsStateBase extends State<Snapshot> {
         this.project(x => x.statuses);
 
     public statusQueries =
-        this.projectFrom(this.statuses, x => buildQueries(x));
+        this.projectFrom(this.statuses, x => buildStatusQueries(x));
 
     constructor(
         private readonly appsState: AppsState,
@@ -107,8 +104,7 @@ export abstract class ContentsStateBase extends State<Snapshot> {
     ) {
         super({
             contents: [],
-            contentsPager: Pager.fromLocalStore('contents', localStore),
-            contentsQueryJson: ''
+            contentsPager: Pager.fromLocalStore('contents', localStore)
         });
 
         this.contentsPager.subscribe(pager => {
@@ -313,7 +309,7 @@ export abstract class ContentsStateBase extends State<Snapshot> {
     }
 
     public search(contentsQuery?: Query): Observable<any> {
-        this.next(s => ({ ...s, contentsPager: s.contentsPager.reset(), contentsQuery, contentsQueryJson: encodeQuery(contentsQuery) }));
+        this.next(s => ({ ...s, contentsPager: s.contentsPager.reset(), contentsQuery }));
 
         return this.loadInternal(false);
     }
@@ -323,11 +319,6 @@ export abstract class ContentsStateBase extends State<Snapshot> {
 
         return this.loadInternal(false);
     }
-
-    public isQueryUsed(saved: SavedQuery) {
-        return this.snapshot.contentsQueryJson === saved.queryJson;
-    }
-
     private get appName() {
         return this.appsState.appName;
     }
@@ -383,13 +374,11 @@ export class ManualContentsState extends ContentsStateBase {
     }
 }
 
-export type ContentQuery =  { color: string; } & SavedQuery;
-
-function buildQueries(statuses: ReadonlyArray<StatusInfo> | undefined): ReadonlyArray<ContentQuery> {
-    return statuses ? statuses.map(s => buildQuery(s)) : [];
+function buildStatusQueries(statuses: ReadonlyArray<StatusInfo> | undefined): ReadonlyArray<SavedQuery> {
+    return statuses ? statuses.map(s => buildStatusQuery(s)) : [];
 }
 
-function buildQuery(s: StatusInfo) {
+function buildStatusQuery(s: StatusInfo) {
     const query = {
         filter: {
             and: [
@@ -398,5 +387,5 @@ function buildQuery(s: StatusInfo) {
         }
     };
 
-    return ({ name: s.status, color: s.color, query, queryJson: encodeQuery(query) });
+    return ({ name: s.status, color: s.color, query });
 }
diff --git a/frontend/app/shared/state/contributors.forms.ts b/frontend/app/shared/state/contributors.forms.ts
index 447079c4d..96f01e7bf 100644
--- a/frontend/app/shared/state/contributors.forms.ts
+++ b/frontend/app/shared/state/contributors.forms.ts
@@ -15,7 +15,7 @@ import {
     value$
 } from '@app/framework';
 
-import { AssignContributorDto } from '../services/contributors.service';
+import { AssignContributorDto } from './../services/contributors.service';
 
 import { UserDto } from './../services/users.service';
 
diff --git a/frontend/app/shared/state/contributors.state.spec.ts b/frontend/app/shared/state/contributors.state.spec.ts
index d87a6c3d1..aec4e5708 100644
--- a/frontend/app/shared/state/contributors.state.spec.ts
+++ b/frontend/app/shared/state/contributors.state.spec.ts
@@ -20,7 +20,7 @@ import {
     versioned
 } from '@app/shared/internal';
 
-import { createContributors } from '../services/contributors.service.spec';
+import { createContributors } from './../services/contributors.service.spec';
 
 import { ErrorDto } from '@app/framework';
 import { TestValues } from './_test-helpers';
diff --git a/frontend/app/shared/state/languages.state.spec.ts b/frontend/app/shared/state/languages.state.spec.ts
index c084c34ad..ed0fe34f7 100644
--- a/frontend/app/shared/state/languages.state.spec.ts
+++ b/frontend/app/shared/state/languages.state.spec.ts
@@ -19,7 +19,7 @@ import {
     versioned
 } from '@app/shared/internal';
 
-import { createLanguages } from '../services/app-languages.service.spec';
+import { createLanguages } from './../services/app-languages.service.spec';
 
 import { TestValues } from './_test-helpers';
 
diff --git a/frontend/app/shared/state/patterns.state.spec.ts b/frontend/app/shared/state/patterns.state.spec.ts
index ea0d64533..9ba1775f6 100644
--- a/frontend/app/shared/state/patterns.state.spec.ts
+++ b/frontend/app/shared/state/patterns.state.spec.ts
@@ -17,7 +17,7 @@ import {
     versioned
 } from '@app/shared/internal';
 
-import { createPatterns } from '../services/patterns.service.spec';
+import { createPatterns } from './../services/patterns.service.spec';
 
 import { TestValues } from './_test-helpers';
 
diff --git a/frontend/app/shared/state/queries.spec.ts b/frontend/app/shared/state/queries.spec.ts
index f2e8a2268..87e4acbfd 100644
--- a/frontend/app/shared/state/queries.spec.ts
+++ b/frontend/app/shared/state/queries.spec.ts
@@ -9,7 +9,6 @@ import { BehaviorSubject } from 'rxjs';
 import { IMock,  Mock, Times } from 'typemoq';
 
 import {
-    encodeQuery,
     Queries,
     SavedQuery,
     UIState
@@ -60,17 +59,11 @@ describe('Queries', () => {
 
         expect(converted!).toEqual([
             {
-                name: 'key1',
-                query: { fullText: 'merged1' },
-                queryJson: encodeQuery({ fullText: 'merged1' })
+                name: 'key1', query: { fullText: 'merged1' }
             }, {
-                name: 'key2',
-                query: { fullText: 'merged2' },
-                queryJson: encodeQuery({ fullText: 'merged2' })
+                name: 'key2', query: { fullText: 'merged2' }
             }, {
-                name: 'key3',
-                query: undefined,
-                queryJson: ''
+                name: 'key3', query: undefined
             }
         ]);
     });
@@ -84,9 +77,7 @@ describe('Queries', () => {
 
         expect(converted!).toEqual([
             {
-                name: 'key1',
-                query: { fullText: 'shared1' },
-                queryJson: encodeQuery({ fullText: 'shared1' })
+                name: 'key1', query: { fullText: 'shared1' }
             }
         ]);
     });
@@ -100,9 +91,7 @@ describe('Queries', () => {
 
         expect(converted!).toEqual([
             {
-                name: 'key1',
-                query: { fullText: 'user1' },
-                queryJson: encodeQuery({ fullText: 'user1' })
+                name: 'key1', query: { fullText: 'user1' }
             }
         ]);
     });
diff --git a/frontend/app/shared/state/queries.ts b/frontend/app/shared/state/queries.ts
index 86a2bc29d..479171885 100644
--- a/frontend/app/shared/state/queries.ts
+++ b/frontend/app/shared/state/queries.ts
@@ -8,21 +8,25 @@
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
 
-import { compareStrings, Types } from '@app/framework';
+import { compareStrings } from '@app/framework';
 
-import { UIState } from './ui.state';
+import {
+    decodeQuery,
+    equalsQuery,
+    Query
+} from './query';
 
-import { encodeQuery, Query } from './query';
+import { UIState } from './ui.state';
 
 export interface SavedQuery {
+    // The optional color.
+    color?: string;
+
     // The name of the query.
     name: string;
 
     // The deserialized value.
     query?: Query;
-
-    // The raw value of the query.
-    queryJson?: string;
 }
 
 const OLDEST_FIRST: Query = {
@@ -37,8 +41,8 @@ export class Queries {
     public queriesUser: Observable<ReadonlyArray<SavedQuery>>;
 
     public defaultQueries: ReadonlyArray<SavedQuery> = [
-        { name: 'All (newest first)', queryJson: '' },
-        { name: 'All (oldest first)', queryJson: encodeQuery(OLDEST_FIRST), query: OLDEST_FIRST }
+        { name: 'All (newest first)' },
+        { name: 'All (oldest first)', query: OLDEST_FIRST }
     ];
 
     constructor(
@@ -78,12 +82,10 @@ export class Queries {
     }
 
     public getSaveKey(query: Query): Observable<string | undefined> {
-        const json = encodeQuery(query);
-
         return this.queries.pipe(
             map(queries => {
                 for (const saved of queries) {
-                    if (saved.queryJson === json) {
+                    if (equalsQuery(saved.query, query)) {
                         return saved.name;
                     }
                 }
@@ -100,17 +102,7 @@ function parseQueries(settings: {}) {
 }
 
 export function parseStored(name: string, raw?: string) {
-    if (Types.isString(raw)) {
-        let query: Query;
-
-        if (raw.indexOf('{') === 0) {
-            query = JSON.parse(raw);
-        } else {
-            query = { fullText: raw };
-        }
-
-        return { name, query, queryJson: encodeQuery(query) };
-    }
+    const query = decodeQuery(raw);
 
-    return { name, query: undefined, queryJson: '' };
+    return { name, query };
 }
\ No newline at end of file
diff --git a/frontend/app/shared/state/query.spec.ts b/frontend/app/shared/state/query.spec.ts
new file mode 100644
index 000000000..f2ead7f8b
--- /dev/null
+++ b/frontend/app/shared/state/query.spec.ts
@@ -0,0 +1,56 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Query } from '@app/shared/internal';
+import { equalsQuery } from './query';
+
+describe('equalsQuery', () => {
+    it('should return true when comparing with empty query', () => {
+        const lhs: Query = {};
+
+        const rhs: Query = {
+            filter: {
+                and: []
+            },
+            sort: []
+        };
+
+        expect(equalsQuery(lhs, rhs)).toBeTruthy();
+    });
+
+    it('should return true when comparing without sort', () => {
+        const lhs: Query = {
+            filter: {
+                and: []
+            }
+        };
+
+        const rhs: Query = {
+            filter: {
+                and: []
+            },
+            sort: []
+        };
+
+        expect(equalsQuery(lhs, rhs)).toBeTruthy();
+    });
+
+    it('should return true when comparing without filter', () => {
+        const lhs: Query = {
+            sort: []
+        };
+
+        const rhs: Query = {
+            filter: {
+                and: []
+            },
+            sort: []
+        };
+
+        expect(equalsQuery(lhs, rhs)).toBeTruthy();
+    });
+});
\ No newline at end of file
diff --git a/frontend/app/shared/state/query.ts b/frontend/app/shared/state/query.ts
index 05ae4e24f..197bb655d 100644
--- a/frontend/app/shared/state/query.ts
+++ b/frontend/app/shared/state/query.ts
@@ -75,7 +75,7 @@ export interface FilterLogical {
     // The child filters if the logical filter is a conjunction (AND).
     and?: FilterNode[];
 
-    // The child filters if the logical filter is a disjunction (OR).
+    // The child filters if the logical filter is a conjunction (AND).
     or?: FilterNode[];
 }
 
@@ -106,12 +106,17 @@ export interface Query {
     skip?: number;
 }
 
-export function encodeQuery(query?: Query) {
-    if (Types.isEmpty(query)) {
-        return '';
-    }
+const DEFAULT_QUERY = {
+    filter: {
+        and: []
+    },
+    sort: []
+};
 
-    query = { ...query };
+function santize(query?: Query) {
+    if (!query) {
+        return DEFAULT_QUERY;
+    }
 
     if (!query.sort) {
         query.sort = [];
@@ -121,7 +126,33 @@ export function encodeQuery(query?: Query) {
         query.filter = { and: [] };
     }
 
-    return encodeURIComponent(JSON.stringify(query));
+    return query;
+}
+
+export function equalsQuery(lhs?: Query, rhs?: Query) {
+    return Types.equals(santize(lhs), santize(rhs));
+}
+
+export function encodeQuery(query?: Query) {
+    return encodeURIComponent(JSON.stringify(santize(query)));
+}
+
+export function decodeQuery(raw?: string): Query | undefined {
+    let query: Query | undefined = undefined;
+
+    try {
+        if (Types.isString(raw)) {
+            if (raw.indexOf('{') === 0) {
+                query = JSON.parse(raw);
+            } else {
+                query = { fullText: raw };
+            }
+        }
+    } catch (ex) {
+        query = undefined;
+    }
+
+    return query;
 }
 
 export function hasFilter(query?: Query) {
diff --git a/frontend/app/shared/state/roles.state.spec.ts b/frontend/app/shared/state/roles.state.spec.ts
index 555d276e5..03d5f7b38 100644
--- a/frontend/app/shared/state/roles.state.spec.ts
+++ b/frontend/app/shared/state/roles.state.spec.ts
@@ -17,7 +17,7 @@ import {
     versioned
 } from '@app/shared/internal';
 
-import { createRoles } from '../services/roles.service.spec';
+import { createRoles } from './../services/roles.service.spec';
 
 import { TestValues } from './_test-helpers';
 
diff --git a/frontend/app/shared/state/rule-events.state.spec.ts b/frontend/app/shared/state/rule-events.state.spec.ts
index e17aac7a9..98b548be1 100644
--- a/frontend/app/shared/state/rule-events.state.spec.ts
+++ b/frontend/app/shared/state/rule-events.state.spec.ts
@@ -18,7 +18,7 @@ import {
     RulesService
 } from '@app/shared/internal';
 
-import { createRuleEvent } from '../services/rules.service.spec';
+import { createRuleEvent } from './../services/rules.service.spec';
 
 import { TestValues } from './_test-helpers';
 
diff --git a/frontend/app/shared/state/rules.state.spec.ts b/frontend/app/shared/state/rules.state.spec.ts
index afc8afbe5..99109dfdd 100644
--- a/frontend/app/shared/state/rules.state.spec.ts
+++ b/frontend/app/shared/state/rules.state.spec.ts
@@ -18,7 +18,7 @@ import {
     versioned
 } from '@app/shared/internal';
 
-import { createRule } from '../services/rules.service.spec';
+import { createRule } from './../services/rules.service.spec';
 
 import { TestValues } from './_test-helpers';
 
diff --git a/frontend/app/shared/state/schemas.state.spec.ts b/frontend/app/shared/state/schemas.state.spec.ts
index 6515f2732..87af44e05 100644
--- a/frontend/app/shared/state/schemas.state.spec.ts
+++ b/frontend/app/shared/state/schemas.state.spec.ts
@@ -20,7 +20,7 @@ import {
     versioned
 } from '@app/shared/internal';
 
-import { createSchema, createSchemaDetails } from '../services/schemas.service.spec';
+import { createSchema, createSchemaDetails } from './../services/schemas.service.spec';
 
 import { TestValues } from './_test-helpers';
 
diff --git a/frontend/app/shared/state/table-fields.ts b/frontend/app/shared/state/table-fields.ts
index 1822d86f8..af17bcea6 100644
--- a/frontend/app/shared/state/table-fields.ts
+++ b/frontend/app/shared/state/table-fields.ts
@@ -14,7 +14,7 @@ import {
     MetaFields,
     SchemaDetailsDto,
     TableField
-} from '../services/schemas.service';
+} from './../services/schemas.service';
 
 import { UIState } from './ui.state';
 
diff --git a/frontend/app/shared/state/ui.state.ts b/frontend/app/shared/state/ui.state.ts
index 38249d292..451822764 100644
--- a/frontend/app/shared/state/ui.state.ts
+++ b/frontend/app/shared/state/ui.state.ts
@@ -10,7 +10,6 @@ import { distinctUntilChanged, map } from 'rxjs/operators';
 
 import {
     hasAnyLink,
-    mergeInto,
     State,
     Types
 } from '@app/framework';
@@ -272,9 +271,9 @@ function getContainer(settings: object, path: string) {
 function updateSettings(state: Snapshot, update: Partial<Snapshot>) {
     const settings = {};
 
-    mergeInto(settings, update.settingsCommon || state.settingsCommon);
-    mergeInto(settings, update.settingsShared || state.settingsShared);
-    mergeInto(settings, update.settingsUser || state.settingsUser);
+    Types.mergeInto(settings, update.settingsCommon || state.settingsCommon);
+    Types.mergeInto(settings, update.settingsShared || state.settingsShared);
+    Types.mergeInto(settings, update.settingsUser || state.settingsUser);
 
     return { ...state, settings, ...update };
 }
\ No newline at end of file
diff --git a/frontend/app/shared/state/workflows.state.spec.ts b/frontend/app/shared/state/workflows.state.spec.ts
index 343ff0bda..8bd7259a3 100644
--- a/frontend/app/shared/state/workflows.state.spec.ts
+++ b/frontend/app/shared/state/workflows.state.spec.ts
@@ -17,7 +17,7 @@ import {
     WorkflowsState
 } from '@app/shared/internal';
 
-import { createWorkflows } from '../services/workflows.service.spec';
+import { createWorkflows } from './../services/workflows.service.spec';
 
 import { TestValues } from './_test-helpers';
 
diff --git a/frontend/app/shell/pages/app/app-area.component.scss b/frontend/app/shell/pages/app/app-area.component.scss
index d1951ab29..e69de29bb 100644
--- a/frontend/app/shell/pages/app/app-area.component.scss
+++ b/frontend/app/shell/pages/app/app-area.component.scss
@@ -1,2 +0,0 @@
-@import '_mixins';
-@import '_vars';
\ No newline at end of file
diff --git a/frontend/app/shell/pages/app/left-menu.component.scss b/frontend/app/shell/pages/app/left-menu.component.scss
index d1951ab29..e69de29bb 100644
--- a/frontend/app/shell/pages/app/left-menu.component.scss
+++ b/frontend/app/shell/pages/app/left-menu.component.scss
@@ -1,2 +0,0 @@
-@import '_mixins';
-@import '_vars';
\ No newline at end of file
diff --git a/frontend/app/shell/pages/forbidden/forbidden-page.component.html b/frontend/app/shell/pages/forbidden/forbidden-page.component.html
new file mode 100644
index 000000000..34f2cf6e2
--- /dev/null
+++ b/frontend/app/shell/pages/forbidden/forbidden-page.component.html
@@ -0,0 +1,7 @@
+<sqx-title message="Not Found"></sqx-title>
+
+<div class="landing-page">
+    <img class="splash-image" src="~/../squid.svg?title=FORBIDDEN&text=You%20are%20not%20allowed%20to%20view%20this%20page&background=white&small" />
+
+    <a href="#" (click)="back()">Back to previous page.</a>
+</div>
\ No newline at end of file
diff --git a/frontend/app/shell/pages/forbidden/forbidden-page.component.scss b/frontend/app/shell/pages/forbidden/forbidden-page.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shell/pages/forbidden/forbidden-page.component.ts b/frontend/app/shell/pages/forbidden/forbidden-page.component.ts
index ea774b467..6bde5d3f0 100644
--- a/frontend/app/shell/pages/forbidden/forbidden-page.component.ts
+++ b/frontend/app/shell/pages/forbidden/forbidden-page.component.ts
@@ -10,15 +10,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'sqx-forbidden-page',
-    template: `
-        <sqx-title message="Not Found"></sqx-title>
-
-        <div class="landing-page">
-            <img class="splash-image" src="~/../squid.svg?title=FORBIDDEN&text=You%20are%20not%20allowed%20to%20view%20this%20page&background=white&small" />
-
-            <a href="#" (click)="back()">Back to previous page.</a>
-        </div>
-    `
+    styleUrls: ['./forbidden-page.component.scss'],
+    templateUrl: './forbidden-page.component.html'
 })
 export class ForbiddenPageComponent {
     constructor(
diff --git a/frontend/app/shell/pages/home/home-page.component.scss b/frontend/app/shell/pages/home/home-page.component.scss
index ff429bbd1..6380c882c 100644
--- a/frontend/app/shell/pages/home/home-page.component.scss
+++ b/frontend/app/shell/pages/home/home-page.component.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 .card {
     & {
         position: relative;
diff --git a/frontend/app/shell/pages/internal/apps-menu.component.scss b/frontend/app/shell/pages/internal/apps-menu.component.scss
index f26f0ba08..c36fd6566 100644
--- a/frontend/app/shell/pages/internal/apps-menu.component.scss
+++ b/frontend/app/shell/pages/internal/apps-menu.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 $color-apps-border: #65a6ff;
 
 $color-nav-shadow: rgba(26, 93, 184, .26);
diff --git a/frontend/app/shell/pages/internal/internal-area.component.scss b/frontend/app/shell/pages/internal/internal-area.component.scss
index c7c30c672..89ef6d739 100644
--- a/frontend/app/shell/pages/internal/internal-area.component.scss
+++ b/frontend/app/shell/pages/internal/internal-area.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .navbar {
     @include box-shadow(0, 3px, 5px, .13);
     display: block;
diff --git a/frontend/app/shell/pages/internal/logo.component.html b/frontend/app/shell/pages/internal/logo.component.html
new file mode 100644
index 000000000..45f21cbe7
--- /dev/null
+++ b/frontend/app/shell/pages/internal/logo.component.html
@@ -0,0 +1,3 @@
+<img [class.hidden]="!isLoading" class="loader" src="./images/loader-white.gif" />
+
+<i [class.hidden]="isLoading" class="icon-logo"></i>
\ No newline at end of file
diff --git a/frontend/app/shell/pages/internal/logo.component.scss b/frontend/app/shell/pages/internal/logo.component.scss
new file mode 100644
index 000000000..5238db8dd
--- /dev/null
+++ b/frontend/app/shell/pages/internal/logo.component.scss
@@ -0,0 +1,3 @@
+.loader {
+    @include absolute(12px, null, null, 40px);
+}
\ No newline at end of file
diff --git a/frontend/app/shell/pages/internal/logo.component.ts b/frontend/app/shell/pages/internal/logo.component.ts
index fc495e321..08834d965 100644
--- a/frontend/app/shell/pages/internal/logo.component.ts
+++ b/frontend/app/shell/pages/internal/logo.component.ts
@@ -9,16 +9,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 @Component({
     selector: 'sqx-logo',
-    template: `
-        <img [class.hidden]="!isLoading" class="loader" src="./images/loader-white.gif" />
-
-        <i [class.hidden]="isLoading" class="icon-logo"></i>
-    `,
-    styles: [`
-        .loader {
-            position: absolute; top: 12px; left: 40px;
-        }`
-    ],
+    styleUrls: ['./logo.component.scss'],
+    templateUrl: './logo.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LogoComponent {
diff --git a/frontend/app/shell/pages/internal/notifications-menu.component.scss b/frontend/app/shell/pages/internal/notifications-menu.component.scss
index 8a8d11e5e..810dfdde1 100644
--- a/frontend/app/shell/pages/internal/notifications-menu.component.scss
+++ b/frontend/app/shell/pages/internal/notifications-menu.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .dropdown-menu {
     left: auto;
     max-height: 500px;
diff --git a/frontend/app/shell/pages/internal/profile-menu.component.scss b/frontend/app/shell/pages/internal/profile-menu.component.scss
index d4d050abf..e74a238a0 100644
--- a/frontend/app/shell/pages/internal/profile-menu.component.scss
+++ b/frontend/app/shell/pages/internal/profile-menu.component.scss
@@ -1,6 +1,3 @@
-@import '_vars';
-@import '_mixins';
-
 .user-picture {
     margin-right: .5rem;
 }
diff --git a/frontend/app/shell/pages/not-found/not-found-page.component.html b/frontend/app/shell/pages/not-found/not-found-page.component.html
new file mode 100644
index 000000000..581416c33
--- /dev/null
+++ b/frontend/app/shell/pages/not-found/not-found-page.component.html
@@ -0,0 +1,7 @@
+<sqx-title message="Not Found"></sqx-title>
+
+<div class="landing-page">
+    <img class="splash-image" src="~/../squid.svg?title=Not Found&text=This%20is%20not%20the%20page%20you%20are%20looking%20for!&background=white&small" />
+
+    <a href="#" (click)="back()">Back to previous page.</a>
+</div>
\ No newline at end of file
diff --git a/frontend/app/shell/pages/not-found/not-found-page.component.scss b/frontend/app/shell/pages/not-found/not-found-page.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/shell/pages/not-found/not-found-page.component.ts b/frontend/app/shell/pages/not-found/not-found-page.component.ts
index 55748b9e4..4df1b1a22 100644
--- a/frontend/app/shell/pages/not-found/not-found-page.component.ts
+++ b/frontend/app/shell/pages/not-found/not-found-page.component.ts
@@ -10,15 +10,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'sqx-not-found-page',
-    template: `
-        <sqx-title message="Not Found"></sqx-title>
-
-        <div class="landing-page">
-            <img class="splash-image" src="~/../squid.svg?title=Not Found&text=This%20is%20not%20the%20page%20you%20are%20looking%20for!&background=white&small" />
-
-            <a href="#" (click)="back()">Back to previous page.</a>
-        </div>
-    `
+    styleUrls: ['./not-found-page.component.scss'],
+    templateUrl: './not-found-page.component.html'
 })
 export class NotFoundPageComponent {
     constructor(
diff --git a/frontend/app/theme/_bootstrap.scss b/frontend/app/theme/_bootstrap.scss
index b1fb039fa..ef086ae6c 100644
--- a/frontend/app/theme/_bootstrap.scss
+++ b/frontend/app/theme/_bootstrap.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 @import './../../node_modules/bootstrap/scss/mixins/_buttons';
 
 //
@@ -678,9 +675,9 @@ $icon-size: 4.5rem;
     }
 
     &-content {
-        @include box-shadow(0, 6px, 16px, .4);
+        @include box-shadow2(0, 8px, 16px, .3);
         border: 0;
-        border-radius: .4rem, .35rem, .35rem, .4rem;
+        border-radius: .4rem .35rem .35rem .4rem;
         max-height: 100%;
     }
 
diff --git a/frontend/app/theme/_common.scss b/frontend/app/theme/_common.scss
index b7e42acf0..825861359 100644
--- a/frontend/app/theme/_common.scss
+++ b/frontend/app/theme/_common.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 body {
     // Default body with padding for fixed navbar and sidebar.
     & {
diff --git a/frontend/app/theme/_forms.scss b/frontend/app/theme/_forms.scss
index 7720c1cc6..635be9c4d 100644
--- a/frontend/app/theme/_forms.scss
+++ b/frontend/app/theme/_forms.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 //
 // Support for Angular validation states.
 // 
diff --git a/frontend/app/theme/_lists.scss b/frontend/app/theme/_lists.scss
index 123c2383a..2eed758b6 100644
--- a/frontend/app/theme/_lists.scss
+++ b/frontend/app/theme/_lists.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 //
 // Custom list that can either be used with a table or divs.
 //
diff --git a/frontend/app/theme/_mixins.scss b/frontend/app/theme/_mixins.scss
index e0867cfa1..51cabf1ab 100644
--- a/frontend/app/theme/_mixins.scss
+++ b/frontend/app/theme/_mixins.scss
@@ -170,6 +170,10 @@
     box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
 }
 
+@mixin box-shadow2($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) {
+    box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+}
+
 @mixin box-shadow-inner($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) {
     box-shadow: inset $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
 }
diff --git a/frontend/app/theme/_panels.scss b/frontend/app/theme/_panels.scss
index 5bbbad9a0..98c94f2c7 100644
--- a/frontend/app/theme/_panels.scss
+++ b/frontend/app/theme/_panels.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 @mixin panel-icon {
     color: $color-border-dark;
     cursor: pointer;
diff --git a/frontend/app/theme/_static.scss b/frontend/app/theme/_static.scss
index 31238cec0..897c2b75d 100644
--- a/frontend/app/theme/_static.scss
+++ b/frontend/app/theme/_static.scss
@@ -1,6 +1,3 @@
-@import '_mixins';
-@import '_vars';
-
 //
 // Noscript element with warning, when javascript is disabled.
 //
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
new file mode 100644
index 000000000..4560f5ea2
--- /dev/null
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+    "extends": "./tsconfig.json",
+    "files": [
+        "app/app.ts",
+        "app/shims.ts"
+    ],
+    "include": [
+        "app/**/*.d.ts"
+    ],
+    "exclude": [
+        "app/**/*.spec.ts"
+    ]
+}
\ No newline at end of file
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index d048e00b5..27049ebb1 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,30 +1,36 @@
 {
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "incremental": true,
-    "importHelpers": true,
-    "lib": ["es6", "esnext", "dom"],
-    "moduleResolution": "node",
-    "module": "esnext",
-    "noEmitHelpers": true,
-    "noImplicitAny": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": false,
-    "removeComments": false,
-    "sourceMap": true,
-    "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "target": "es5",
-    "paths": {
-      "@app*": [
-        "app*"
-      ]
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "baseUrl": ".",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "incremental": true,
+        "importHelpers": true,
+        "lib": [
+            "es6",
+            "esnext",
+            "dom"
+        ],
+        "moduleResolution": "node",
+        "module": "esnext",
+        "noEmitHelpers": true,
+        "noImplicitAny": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": false,
+        "removeComments": false,
+        "sourceMap": true,
+        "strictNullChecks": true,
+        "suppressImplicitAnyIndexErrors": true,
+        "target": "es5",
+        "paths": {
+            "@app*": [
+                "app*"
+            ]
+        },
+    },
+    "angularCompilerOptions": {
+        "fullTemplateTypeCheck": true,
+        // https://angular.io/guide/angular-compiler-options
+        "strictInjectionParameters": true
     }
-  },
-  "angularCompilerOptions": { 
-    "fullTemplateTypeCheck": true
-  }
 }
\ No newline at end of file
diff --git a/frontend/tsconfig.spec.json b/frontend/tsconfig.spec.json
new file mode 100644
index 000000000..d6cc42f32
--- /dev/null
+++ b/frontend/tsconfig.spec.json
@@ -0,0 +1,3 @@
+{
+    "extends": "./tsconfig.json"
+}
\ No newline at end of file