diff --git a/external_components/ws2812_table_tennis/__init__.py b/external_components/ws2812_table_tennis/__init__.py
new file mode 100644
index 0000000..6084fdc
--- /dev/null
+++ b/external_components/ws2812_table_tennis/__init__.py
@@ -0,0 +1,36 @@
+import esphome.codegen as cg
+import esphome.config_validation as cv
+from esphome.components import mqtt, number
+from esphome.const import CONF_ID
+
+ws2812_table_tennis_ns = cg.esphome_ns.namespace('ws2812_table_tennis')
+W2812Display = ws2812_table_tennis_ns.class_('CustomNumberDisplayComponent', mqtt.MQTTComponent, cg.Component)
+
+DEPENDENCIES = ['mqtt', 'number']
+
+#CONF_WS2812_PIN = "pin"
+#CONF_WS2812_RGB_MODE = "rgb_mode"
+
+CONF_RED_NUM = "red_number"
+CONF_BLUE_NUM = "blue_number"
+
+
+CONFIG_SCHEMA = cv.Schema({
+  cv.GenerateID(CONF_ID): cv.declare_id(W2812Display),
+  cv.Required(CONF_RED_NUM): cv.use_id(number.Number),
+  cv.Required(CONF_BLUE_NUM): cv.use_id(number.Number)
+})
+
+
+def to_code(config):
+  var = cg.new_Pvariable(config[CONF_ID])
+  #yield cg.register_component(var, config)
+  yield mqtt.register_mqtt_component(var, config)
+  
+  red = yield cg.get_variable(config[CONF_RED_NUM])
+  cg.add(var.set_red_number(red))
+  
+  blue = yield cg.get_variable(config[CONF_BLUE_NUM])
+  cg.add(var.set_blue_number(blue))
+
+cg.add_library("makuna/NeoPixelBus", "2.7.3")
\ No newline at end of file
diff --git a/cpp-files/tableTennisDisplay.h b/external_components/ws2812_table_tennis/tableTennisDisplay.h
similarity index 87%
rename from cpp-files/tableTennisDisplay.h
rename to external_components/ws2812_table_tennis/tableTennisDisplay.h
index 45c2a57..c4bc759 100644
--- a/cpp-files/tableTennisDisplay.h
+++ b/external_components/ws2812_table_tennis/tableTennisDisplay.h
@@ -3,6 +3,9 @@
 //#include "multi_effect_handler.h"
 #define SEGMENT_LENGTH 5
 
+namespace esphome {
+namespace ws2812_table_tennis {
+
 class NbsEffect {
   private: 
     int goalRed = 0, goalGreen = 0, goalBlue = 0;
@@ -89,40 +92,53 @@ class NbsEffect {
 };
 
 NeoPixelBus<NeoGrbFeature, NeoEsp8266BitBangWs2812xMethod> nbsStrip(143, D5);
-class CustomNumberDisplayComponent : public Component, public CustomMQTTDevice {
-const int middleSegment = SEGMENT_LENGTH * 14;
+class CustomNumberDisplayComponent : public Component, public mqtt::CustomMQTTDevice {
+  protected:
+  const int middleSegment = SEGMENT_LENGTH * 14;
 
+  const int transitionLength = 500; // milliseconds
+  const int middleLength = 2;
+  const double brightness = 0.17;
 
-const int transitionLength = 500; // milliseconds
-const int middleLength = 2;
-const double brightness = 0.17;
+  NbsEffect *colorAnimation[4][7];
+  NbsEffect *middleSegmentAnim;
 
-NbsEffect *colorAnimation[4][7];
-NbsEffect *middleSegmentAnim;
+  unsigned long lastUpdate = 0;
+  bool shouldShowNBS = true;
 
-unsigned long lastUpdate = 0;
-bool shouldShowNBS = true;
+  bool numbers[14][7] = {
+    {0, 1, 1, 1, 1, 1, 1}, // 0
+    {0, 1, 0, 0, 0, 0, 1}, // 1
+    {1, 1, 1, 0, 1, 1, 0}, // 2
+    {1, 1, 1, 0, 0, 1, 1}, // 3
+    {1, 1, 0, 1, 0, 0, 1}, // 4
+    {1, 0, 1, 1, 0, 1, 1}, // 5
+    {1, 0, 1, 1, 1, 1, 1}, // 6
+    {0, 1, 1, 0, 0, 0, 1}, // 7
+    {1, 1, 1, 1, 1, 1, 1}, // 8
+    {1, 1, 1, 1, 0, 1, 1}, // 9
+    {0, 0, 0, 0, 0, 0, 0}, // No Display (10)
+    {1, 0, 0, 0, 0, 0, 0}, // - (11)
+    {1, 0, 0, 0, 1, 0, 1}, // n (12)
+    {1, 0, 0, 1, 1, 1, 1}  // b (13)
+  };
 
-bool numbers[14][7] = {
-  {0, 1, 1, 1, 1, 1, 1}, // 0
-  {0, 1, 0, 0, 0, 0, 1}, // 1
-  {1, 1, 1, 0, 1, 1, 0}, // 2
-  {1, 1, 1, 0, 0, 1, 1}, // 3
-  {1, 1, 0, 1, 0, 0, 1}, // 4
-  {1, 0, 1, 1, 0, 1, 1}, // 5
-  {1, 0, 1, 1, 1, 1, 1}, // 6
-  {0, 1, 1, 0, 0, 0, 1}, // 7
-  {1, 1, 1, 1, 1, 1, 1}, // 8
-  {1, 1, 1, 1, 0, 1, 1}, // 9
-  {0, 0, 0, 0, 0, 0, 0}, // No Display (10)
-  {1, 0, 0, 0, 0, 0, 0}, // - (11)
-  {1, 0, 0, 0, 1, 0, 1}, // n (12)
-  {1, 0, 0, 1, 1, 1, 1}  // b (13)
-};
+  template_::TemplateNumber *redNum;
+  template_::TemplateNumber *blueNum;
 
  public:
+
+  void set_red_number(template_::TemplateNumber *redNum){
+    this->redNum = redNum;
+  }
+  void set_blue_number(template_::TemplateNumber *blueNum){
+    this->blueNum = blueNum;
+  }
+
   void setup() override {
 
+
+
     // Segment mapping
     int segPixelCounter = 0;
     for(int i = 0; i < 4; ++i){
@@ -146,7 +162,7 @@ bool numbers[14][7] = {
     // also supports JSON messages
     subscribe_json("tabletenniscounter/display/number/command", &CustomNumberDisplayComponent::on_json_message, 2);
 
-    
+    ESP_LOGD("TableTennisCounter", "Ready");
   }
 
   void on_json_message(const std::string &topic, JsonObject root) {
@@ -183,8 +199,8 @@ bool numbers[14][7] = {
     int player1 = root["player1"];
     int player2 = root["player2"];
 
-    id(red_num).set(player1);
-    id(blue_num).set(player2);
+    redNum->publish_state(player1);
+    blueNum->publish_state(player2);
     bool player1Start = root["player1Start"];
     // do something with Json Object
     if(player1 > 99) { player1 = 99; }
@@ -353,3 +369,5 @@ bool numbers[14][7] = {
   }
 };
 
+}
+}
\ No newline at end of file
diff --git a/pingpongfuss1.yaml b/pingpongfuss1.yaml
index f2b79a1..3a99f73 100644
--- a/pingpongfuss1.yaml
+++ b/pingpongfuss1.yaml
@@ -10,10 +10,11 @@ logger:
 # DISABLED - We currently do not need it for operation. Maybe someday
 
 # api:
-#  password: !secret ttfpassword
+#  encryption:
+#    key: !secret ttf_key
 
 ota:
-  password: !secret ttfpassword
+  password: !secret ttf_password
 
 wifi:
   ssid: !secret wifi_ssid
diff --git a/tableTennisDisplay.yaml b/tableTennisDisplay.yaml
index 7095132..aa82776 100644
--- a/tableTennisDisplay.yaml
+++ b/tableTennisDisplay.yaml
@@ -2,15 +2,12 @@ esphome:
   name: tabletenniscounter
   platform: ESP8266
   board: nodemcuv2
-  includes:
-    - cpp-files/tableTennisDisplay.h
-  libraries:
-    - "makuna/NeoPixelBus"
-  
-custom_component:
-- lambda: |-
-    auto customNumberDisplay = new CustomNumberDisplayComponent();
-    return {customNumberDisplay};
+
+external_components:
+  - source:
+      type: local
+      path: external_components/
+    components: [ ws2812_table_tennis ]
 
 # Enable logging
 logger:
@@ -19,7 +16,6 @@ ota:
   password: !secret ttdpassword
 
 api:
-  password: !secret ttdpassword
   encryption:
     key: !secret ttdkey
 
@@ -48,4 +44,9 @@ mqtt:
   broker: !secret mqtt_broker_1
   client_id: "tableTennisCounter"
   username: !secret mqtt_broker_1_username
-  password: !secret mqtt_broker_1_password
\ No newline at end of file
+  password: !secret mqtt_broker_1_password
+
+ws2812_table_tennis:
+#  name: Led Display
+  red_number: red_num
+  blue_number: blue_num
\ No newline at end of file