diff --git a/assets/fonts/config.json b/assets/fonts/config.json
index 816b468..97ecf73 100644
--- a/assets/fonts/config.json
+++ b/assets/fonts/config.json
@@ -254,6 +254,54 @@
       "code": 59394,
       "src": "fontawesome"
     },
+    {
+      "uid": "8cbd5bcfb00043b8094fd7ac21ae5e06",
+      "css": "angle-circled-up",
+      "code": 61753,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "c35e0796f6f806945a44b1655ce7bbe7",
+      "css": "angle-circled-down",
+      "code": 61754,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "8933c2579166c2ee56ae40dc6a0b4dc6",
+      "css": "angle-circled-left",
+      "code": 61751,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "94089b37297572e936b0943bcfa041d3",
+      "css": "angle-circled-right",
+      "code": 61752,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "f3f90c8c89795da30f7444634476ea4f",
+      "css": "angle-left",
+      "code": 61700,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "7bf14281af5633a597f85b061ef1cfb9",
+      "css": "angle-right",
+      "code": 61701,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "e4dde1992f787163e2e2b534b8c8067d",
+      "css": "angle-down",
+      "code": 61703,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5de9370846a26947e03f63142a3f1c07",
+      "css": "angle-up",
+      "code": 61702,
+      "src": "fontawesome"
+    },
     {
       "uid": "efb8e2c22ada5ce5b02631e8b4be473d",
       "css": "ion-alert-circled",
diff --git a/assets/fonts/iconfont.eot b/assets/fonts/iconfont.eot
index 2d36af5..6a6d86a 100644
Binary files a/assets/fonts/iconfont.eot and b/assets/fonts/iconfont.eot differ
diff --git a/assets/fonts/iconfont.svg b/assets/fonts/iconfont.svg
index 286e0dc..d7fc15f 100644
--- a/assets/fonts/iconfont.svg
+++ b/assets/fonts/iconfont.svg
@@ -14,10 +14,26 @@
 
 <glyph glyph-name="menu" unicode="&#xf0c9;" d="M857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-14-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="angle-left" unicode="&#xf104;" d="M350 546q0-7-6-12l-219-220 219-219q6-6 6-13t-6-13l-28-28q-5-5-12-5t-13 5l-260 261q-6 5-6 12t6 13l260 260q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="357.1" />
+
+<glyph glyph-name="angle-right" unicode="&#xf105;" d="M332 314q0-7-5-12l-261-261q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l261-260q5-5 5-13z" horiz-adv-x="357.1" />
+
+<glyph glyph-name="angle-up" unicode="&#xf106;" d="M600 189q0-7-6-12l-28-28q-5-6-12-6t-13 6l-220 219-219-219q-5-6-13-6t-12 6l-28 28q-6 5-6 12t6 13l260 260q5 6 12 6t13-6l260-260q6-5 6-13z" horiz-adv-x="642.9" />
+
+<glyph glyph-name="angle-down" unicode="&#xf107;" d="M600 439q0-7-6-12l-260-261q-5-5-13-5t-12 5l-260 261q-6 5-6 12t6 13l28 28q5 6 12 6t13-6l219-219 220 219q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="642.9" />
+
 <glyph glyph-name="chatbox" unicode="&#xf11b;" d="M148 69c-82 0-148 60-148 138v409c0 78 66 140 148 140h516c82 0 149-62 149-140v-409c0-78-67-138-149-138h-8v-125s-154 105-168 115-13 10-41 10h-299z" horiz-adv-x="812.5" />
 
 <glyph glyph-name="document-text" unicode="&#xf12e;" d="M559 520c2-6 4-12 4-20v-478c0-26-20-47-43-47h-475c-23 0-45 21-45 47v656c0 26 22 47 45 47h312c6 0 12 0 18-4 4-2 10-6 14-10l164-179c4-4 4-8 6-12z m-465-20v-19c0-2 2-6 6-6h138c4 0 6 4 6 6v19c0 4-2 6-6 6h-138c-4 0-6-2-6-6z m0-250v-19c0-2 2-6 6-6h240c4 0 4 4 4 6v19c0 4 0 6-4 6h-240c-4 0-6-2-6-6z m312-144v19c0 4 0 6-4 6h-302c-4 0-6-2-6-6v-19c0-2 2-6 6-6h302c4 0 4 4 4 6z m63 250v19c0 4 0 6-4 6h-365c-4 0-6-2-6-6v-19c0-2 2-6 6-6h365c4 0 4 4 4 6z m-92 146h117l-138 153v-129c0-12 9-24 21-24z" horiz-adv-x="562.5" />
 
+<glyph glyph-name="angle-circled-left" unicode="&#xf137;" d="M507 72l57 57q11 10 11 25t-11 25l-171 171 171 171q11 11 11 25t-11 26l-57 57q-10 10-25 10t-25-10l-253-254q-11-10-11-25t11-25l253-253q11-11 25-11t25 11z m350 278q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="angle-circled-right" unicode="&#xf138;" d="M400 72l254 253q10 11 10 25t-10 25l-254 254q-10 10-25 10t-25-10l-57-57q-11-11-11-26t11-25l171-171-171-171q-11-11-11-25t11-25l57-57q11-11 25-11t25 11z m457 278q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="angle-circled-up" unicode="&#xf139;" d="M650 214l57 57q11 11 11 25t-11 26l-253 253q-11 11-25 11t-25-11l-254-253q-10-11-10-26t10-25l57-57q11-10 25-10t25 10l172 172 171-172q11-10 25-10t25 10z m207 136q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="angle-circled-down" unicode="&#xf13a;" d="M454 125l253 254q11 10 11 25t-11 25l-57 57q-10 10-25 10t-25-10l-171-172-172 172q-10 10-25 10t-25-10l-57-57q-10-11-10-25t10-25l254-254q10-10 25-10t25 10z m403 225q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="gear" unicode="&#xf13d;" d="M678 350c0-47 29-84 72-109-8-26-19-51-31-75-49 12-88-5-121-39s-43-72-32-121c-23-12-48-23-74-31-25 43-70 72-117 72s-92-29-117-72c-26 8-53 19-76 31 11 49 4 88-30 121s-72 41-121 30c-11 23-23 50-31 76 43 25 72 70 72 117s-29 84-72 109c8 26 18 51 31 75 49-12 88 6 121 39s41 72 30 121c23 12 50 23 76 31 25-43 70-72 117-72s92 29 117 72c26-8 53-19 76-31-11-49-3-88 30-121s72-51 121-39c12-24 23-49 31-75-43-25-72-62-72-109z m-303-191c106 0 191 86 191 191s-85 191-191 191-191-85-191-191 86-191 191-191z" horiz-adv-x="750" />
 
 <glyph glyph-name="images" unicode="&#xf148;" d="M832 577c25-2 45-24 43-47l-27-514c-2-25-24-43-49-41l-645 31c-25 2-45 20-43 45l4 90-29-2c-23-2-43 14-45 35l-41 461c-2 22 14 41 37 43l578 47c24 2 43-14 45-35l10-106z m-693-12c2 23 21 43 47 43l427-22-4 61h-2v2c-1 10-9 16-19 16l-510-43c-10 0-19-8-19-18v0-2l31-348 35 49z m652-461l20 387v2 0c0 11-10 19-22 19l-113 6-57 4-398 18c-12 0-22-8-24-18v0-2l-6-123-13-250v-14l12 14 199 213c8 8 15 12 27 12s22-6 27-14l84-96 6-6c4-4 12-8 20-8s10 2 17 6l34 24c7 6 13 8 21 8s18-4 22-10l52-65z m-125 234c-39 0-68 30-68 69s31 68 68 68c39 0 68-31 68-68s-31-69-68-69z" horiz-adv-x="875" />
diff --git a/assets/fonts/iconfont.ttf b/assets/fonts/iconfont.ttf
index 3d01185..82219cf 100644
Binary files a/assets/fonts/iconfont.ttf and b/assets/fonts/iconfont.ttf differ
diff --git a/assets/fonts/iconfont.woff b/assets/fonts/iconfont.woff
index 1314ef4..cc6906a 100644
Binary files a/assets/fonts/iconfont.woff and b/assets/fonts/iconfont.woff differ
diff --git a/assets/fonts/iconfont.woff2 b/assets/fonts/iconfont.woff2
index c7e311d..692216c 100644
Binary files a/assets/fonts/iconfont.woff2 and b/assets/fonts/iconfont.woff2 differ
diff --git a/src/app.less b/src/app.less
index d584760..6d7dab5 100644
--- a/src/app.less
+++ b/src/app.less
@@ -253,95 +253,6 @@ button{
 .content_table_headline {margin-bottom:10px;}
 
 
-/*--------------------------------------------------------------
-# Content Tables
---------------------------------------------------------------*/
-.cms_table_row_content, .cms_table_row_header {margin:0px -25px;}
-.cms_table_row {
-	display: table;
-	width: 100%;
-    table-layout: fixed;
-    background:#FFF;
-    padding:10px 15px;
-    position:relative;
-}
-.cms_table_row:nth-child(even) {background:#f5f3f4;}
-.table_cell {
-	display: table-cell;
-	vertical-align: middle;
-	padding:0px 10px;
-}
-
-.cell_checkbox {width:40px;}
-.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
-.cell_title {position:relative;}
-.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}
-
-.cell_date {}
-.cell_author {}
-.cell_category {}
-.cell_status {position:relative; padding-left:20px;}
-
-.cell_status:before {
-	content:"";
-	display:block;
-	position:absolute;
-	left:0px; top:50%;
-	margin-top:-5px;
-	width:12px; height:12px;
-	border-radius:100%;
-	background:#88c87a;
-}
-
-.cell_status_online {color:#28b78d;} .cell_status_online:before {background-color:#28b78d;}
-.cell_status_offline {color:#ea5e5d;} .cell_status_offline:before {background-color:#ea5e5d;}
-.cell_status_remaining {color:#5fb1e9;} .cell_status_remaining:before {background-color:#5fb1e9;}
-.cell_status_expired {color:#eba760;} .cell_status_expired:before {background-color:#eba760;}
-
-.cell_settings {text-align:right; width:150px; position:relative; right:0px;}
-.cell_settings a {color:#000; list-style-type:none;}
-.cell_settings .fa-cog {font-size:20px;}
-.cell_settings_inner {
-	position:absolute;
-	width:205px; height:40px;
-	top:50%;
-	right:-3px;
-	margin-top:-21px;
-	border-radius:20px;
-	background:#e0e0e0;
-	padding:0px 10px;
-	z-index:-1;
-	overflow:hidden;
-	opacity:0;
-	-webkit-opacity:0;
-	-moz-opacity:0;
-	transition:all 0.3s;
-}
-.cell_settings_inner_container {float:right;}
-.cell_settings_inner_section {float:left; border-right:solid 1px #999; padding:0px 10px;}
-.cell_settings_inner_section_last {border:none; padding-right:3px;}
-.cell_settings_inner_section ul {list-style-type:none;}
-.cell_settings_inner_section ul li {float:left; padding-right:7px;}
-.cell_settings_inner_section_last ul li {padding:0px;}
-.cell_settings_inner_section ul li a {color:#000;}
-.cell_settings_inner_section ul li .fa {line-height:40px; font-size:20px;}
-
-.cell_settings_click, .cell_settings_close {/*z-index:700;*/ cursor:pointer;}
-.cell_settings a:hover, .cell_settings_click:hover {color:#28b78d!important;}
-
-.cms_table_row_header .cms_table_row {background:none; font-size:13px; padding:10px 15px;}
-.cms_table_row_header .fa {font-size:12px;}
-
-.cell_settings_inner_open {
-	opacity:1;
-	-webkit-opacity:1;
-	-moz-opacity:1;
-	width:205px;
-	z-index:600;
-	transition:all 0.3s;
-}
-
-
 /*--------------------------------------------------------------
 # Table Footer
 --------------------------------------------------------------*/
diff --git a/src/components/my-table.vue b/src/components/my-table.vue
index 5a41a79..2057543 100644
--- a/src/components/my-table.vue
+++ b/src/components/my-table.vue
@@ -1,81 +1,193 @@
 <template>
-
-    <div class="My-Table">
-        <table>
-            <thead>
-                <tr>
-                    <th v-for="(c, i) in columns" :key="i">
-                        <span @click="orderBy(c.orderBy)" v-if="c.orderBy">{{ c.heading }} V</span>
-                        <span v-else>{{ c.heading }}</span>
-                    </th>
-                </tr>
-            </thead>
-            <tbody is="transition-group" name="list">
-                <tr v-for="(r, ri) in rows" :key="ri">
-                    <td v-for="(c, ci) in columns" :key="ci + 'c'">
-                        <span v-if="c.prop">{{ getProp(r, c.prop) }}</span>
-                        <span v-else-if="c.render">{{ c.render(r) }}</span>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+    <div class="cms_table">
+    	<div class="table_header">
+    		<div class="table_row">
+	            <div v-for="(col, i) in columns" :class="['table_cell', {['sortable']: col.orderBy}]" :key="i">
+	                <div @click="orderBy(col.orderBy)" v-if="col.orderBy">
+	                	{{ col.heading }}
+	                	<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
+	                	<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
+	                	<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
+	                </div>
+	                <div v-else>{{ col.heading }}</div>
+	            </div>
+            </div>
+    	</div>
+    	<div class="table_content" is="transition-group" name="list">
+            <div class="table_row" v-for="(row, ri) in rows" :key="ri">
+                <div class="table_cell" v-for="(col, ci) in columns" :key="ci + 'c'">
+                    <div v-if="col.prop">{{ getProp(row, col.prop) }}</div>
+                    <div v-else-if="col.render">{{ col.render(row) }}</div>
+                </div>
+            </div>
+    	</div>
     </div>
-
 </template>
 
 <script>
-export default {
-    name: 'My-Table',
-    props: {
-       columns: {
-           type: Array,
-           default() {
-                return [ ];
-           }
-       },
-       rows: {
-           type: Array,
-           default() {
-                return [ ];
-           }
-       }
-    },
-    data() {
-        return {
-        }
-    },
-    methods: {
-        orderBy(col) {
-            console.log(col);
-            this.$emit('sort', {
-                orderBy: col,
-                orderDesc: false
-            });
-        },
-        getProp(row, prop) {
-            let props = prop.split('.');
-            let val = row;
-            props.forEach((p) => {
-                if (typeof val == 'object') {
-                    val = val[p];
-                }
-            });
-            return val; 
-        }
-    }
-}
+	export default {
+		name: 'My-Table',
+		props: {
+			currentOrderBy: {
+				type: String
+			},
+			currentOrderDesc: {
+				type: Boolean
+			},
+			columns: {
+				type: Array,
+				default() {
+					return [ ];
+				}
+			},
+			rows: {
+				type: Array,
+				default() {
+					return [ ];
+				}
+			}
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			orderBy(col) {
+				console.log(col);
+				this.$emit('sort', {
+					orderBy: col,
+					orderDesc: false
+				});
+			},
+			getProp(row, prop) {
+				let props = prop.split('.');
+				let val = row;
+				props.forEach((p) => {
+					if (typeof val == 'object') {
+						val = val[p];
+					}
+				});
+				return val;
+			}
+		}
+	}
 </script>
 
-<style>
-.list-item {
-  display: inline-block;
-  margin-right: 10px;
-}
-.list-enter-active, .list-leave-active {
-  transition: all 1s;
-}
-.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
-  opacity: 0;
-  transform: translateY(30px);
-}
+<style lang="less">
+	@import "../mixins";
+	.list-item {
+	  display: inline-block;
+	  margin-right: 10px;
+	}
+	.list-enter-active, .list-leave-active {
+	  transition: all 0.2s;
+	}
+	.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
+	  opacity: 0;
+	  transform: translateY(30px);
+	}
+
+	/*--------------------------------------------------------------
+	# Content Tables
+	--------------------------------------------------------------*/
+	.cms_table{
+		&>.table_header, &>.table_content{margin: 0px -25px;}
+		&>.table_header{
+			.table_row {background:none; font-size:13px; padding:10px 15px;}
+			.icon {font-size:14px;}
+		}
+		.table_row{
+		    position: relative;
+			display: table;
+			width: 100%;
+		    table-layout: fixed;
+		    background: white;
+		    padding: 10px 15px;
+
+		    &:nth-child(even) {
+		    	background:#f5f3f4;
+		   	}
+		}
+
+		.table_cell {
+			display: table-cell;
+			vertical-align: middle;
+			padding:0px 10px;
+
+			&.sortable{
+				&:hover{
+					cursor: pointer;
+				}
+			}
+		}
+
+		/*.cell_checkbox {width:40px;}
+		.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
+		.cell_title {position:relative;}
+		.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/
+
+		/* === Other cell types === */
+		/*.cell_date {}
+		.cell_author {}
+		.cell_category {}
+		.cell_status {position:relative; padding-left:20px;}
+
+		.cell_status:before {
+			content:"";
+			display:block;
+			position:absolute;
+			left:0px; top:50%;
+			margin-top:-5px;
+			width:12px; height:12px;
+			border-radius:100%;
+			background:#88c87a;
+		}
+
+		.cell_status_online {color:#28b78d;} .cell_status_online:before {background-color:#28b78d;}
+		.cell_status_offline {color:#ea5e5d;} .cell_status_offline:before {background-color:#ea5e5d;}
+		.cell_status_remaining {color:#5fb1e9;} .cell_status_remaining:before {background-color:#5fb1e9;}
+		.cell_status_expired {color:#eba760;} .cell_status_expired:before {background-color:#eba760;}
+		*/
+
+		/* === Cell settings === */
+		/*.cell_settings {text-align:right; width:150px; position:relative; right:0px;}
+		.cell_settings a {color:#000; list-style-type:none;}
+		.cell_settings .fa-cog {font-size:20px;}
+		.cell_settings_inner {
+			position:absolute;
+			width:205px; height:40px;
+			top:50%;
+			right:-3px;
+			margin-top:-21px;
+			border-radius:20px;
+			background:#e0e0e0;
+			padding:0px 10px;
+			z-index:-1;
+			overflow:hidden;
+			opacity:0;
+			-webkit-opacity:0;
+			-moz-opacity:0;
+			transition:all 0.3s;
+		}
+		.cell_settings_inner_container {float:right;}
+		.cell_settings_inner_section {float:left; border-right:solid 1px #999; padding:0px 10px;}
+		.cell_settings_inner_section_last {border:none; padding-right:3px;}
+		.cell_settings_inner_section ul {list-style-type:none;}
+		.cell_settings_inner_section ul li {float:left; padding-right:7px;}
+		.cell_settings_inner_section_last ul li {padding:0px;}
+		.cell_settings_inner_section ul li a {color:#000;}
+		.cell_settings_inner_section ul li .fa {line-height:40px; font-size:20px;}
+
+		.cell_settings_click, .cell_settings_close {cursor:pointer;}
+		.cell_settings a:hover, .cell_settings_click:hover {color:#28b78d!important;}
+
+		.cell_settings_inner_open {
+			opacity:1;
+			-webkit-opacity:1;
+			-moz-opacity:1;
+			width:205px;
+			z-index:600;
+			transition:all 0.3s;
+		}*/
+	}
 </style>
diff --git a/src/components/scroll-table.vue b/src/components/scroll-table.vue
index c5707f1..a870ef8 100644
--- a/src/components/scroll-table.vue
+++ b/src/components/scroll-table.vue
@@ -1,7 +1,11 @@
 <template>
     <div class="Scroll-Table">
         <my-input label="Suche:" type="text" @change="searchChanged" v-model="currentSearch"></my-input>
-        <my-table :columns="columns" :rows="rows" @sort="sort"></my-table>
+        <my-table :columns="columns" :rows="rows"
+          :currentOrderBy="currentOrderBy"
+          :currentOrderDesc="currentOrderDesc"
+          @sort="sort">
+        </my-table>
         <div v-if="loadingDelayed">loading...</div>
         <div style="padding-left: 30%; padding-bottom: 100px;">
             <span v-show="hasMore || reloadTriggered" v-if="!loadingDelayed" v-observe-visibility="visibilityChanged">...</span>
@@ -113,7 +117,7 @@ export default {
                 this.rows.push(row);
                 setTimeout(() => {
                     this.pushRows();
-                }, 50);
+                }, 20);
             }
         },
         clear() {
diff --git a/src/icons.less b/src/icons.less
index 8bc2ef3..dd6f17c 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -1,7 +1,7 @@
 @import "mixins";
 
 @iconfont_path: "~/assets/fonts/";
-@iconfont_version: 2;
+@iconfont_version: 3;
 
 
 @font-face {
@@ -20,8 +20,16 @@
 .icon-user:before { content: '\e801'; } /* '' */
 .icon-key:before { content: '\e802'; } /* '' */
 .icon-menu:before { content: '\f0c9'; } /* '' */
+.icon-angle-left:before { content: '\f104'; } /* '' */
+.icon-angle-right:before { content: '\f105'; } /* '' */
+.icon-angle-up:before { content: '\f106'; } /* '' */
+.icon-angle-down:before { content: '\f107'; } /* '' */
 .icon-chatbox:before { content: '\f11b'; } /* '' */
 .icon-document-text:before { content: '\f12e'; } /* '' */
+.icon-angle-circled-left:before { content: '\f137'; } /* '' */
+.icon-angle-circled-right:before { content: '\f138'; } /* '' */
+.icon-angle-circled-up:before { content: '\f139'; } /* '' */
+.icon-angle-circled-down:before { content: '\f13a'; } /* '' */
 .icon-gear:before { content: '\f13d'; } /* '' */
 .icon-images:before { content: '\f148'; } /* '' */
 .icon-log-out:before { content: '\f29f'; } /* '' */