diff --git a/MMM-HomeAssistant-Touch.css b/MMM-HomeAssistant-Touch.css
index ed11d81..78e2711 100644
--- a/MMM-HomeAssistant-Touch.css
+++ b/MMM-HomeAssistant-Touch.css
@@ -7,11 +7,11 @@
 #MMM-HomeAssistant-Touch .ha-entity {
   border: 0.1rem solid grey;
   border-radius: 0.5rem;
-  padding: 0.5rem;
   margin: 0.5rem;
-  height: 7rem;
-  width: 7rem;
-  font-size: 18px;
+  width: max-content;
+  height: 2rem;
+  padding: 0rem 0.5rem 1rem 0.5rem;
+  font-size: 15px;
 }
 
 #MMM-HomeAssistant-Touch .ha-entity .title,
diff --git a/MMM-HomeAssistant-Touch.js b/MMM-HomeAssistant-Touch.js
index 1968a66..a60b675 100644
--- a/MMM-HomeAssistant-Touch.js
+++ b/MMM-HomeAssistant-Touch.js
@@ -102,10 +102,10 @@ function loadEntityClasses() {
   this.entities = {};
 
   // load UI Classes
-  for (const entity of this.config.entities) {
+  for (const entity in this.config.entities_name) {
     const entityClass = this.UIClassFactory.getEntityClass(entity);
     if (entityClass) {
-      this.entities[entity] = new entityClass(entity, this);
+      this.entities[entity] = new entityClass(entity, this, this.config.entities_name[entity]);
     }
   }
 }
diff --git a/UIClasses/Base.js b/UIClasses/Base.js
index 0bba2d7..3923fd8 100644
--- a/UIClasses/Base.js
+++ b/UIClasses/Base.js
@@ -1,13 +1,16 @@
 class Base {
-  constructor(id, mm) {
+  constructor(id, mm, name = "") {
     this.id = id;
     this.type = id.split(".")[0];
-    this.name = id;
+	if (name == "")
+		this.name = id;
+	else 
+		this.name = name;
     this.mm = mm;
   }
 
   updateState(state) {
-    this.name = (state.attributes || {}).friendly_name || this.id;
+    //this.name = (state.attributes || {}).friendly_name || this.id;
     this.state = state.state;
     this.render();
   }