diff --git a/esphome/components/display/display.cpp b/esphome/components/display/display.cpp
index 6ee60f432a..3171f49223 100644
--- a/esphome/components/display/display.cpp
+++ b/esphome/components/display/display.cpp
@@ -174,10 +174,10 @@ void Display::menu(int x, int y, graphical_display_menu::GraphicalDisplayMenu *m
 #endif  // USE_GRAPHICAL_DISPLAY_MENU
 
 #ifdef USE_GRAPHICAL_LAYOUT
-  void Display::render_layout(int x, int y, graphical_layout::RootLayoutComponent *layout) {
-    display::Rect b2(x, y, 100, 100);
-    layout->render_at(this, x, y);
-  }
+void Display::render_layout(int x, int y, graphical_layout::RootLayoutComponent *layout) {
+  display::Rect b2(x, y, 100, 100);
+  layout->render_at(this, x, y);
+}
 #endif
 
 void Display::get_text_bounds(int x, int y, const char *text, BaseFont *font, TextAlign align, int *x1, int *y1,
@@ -358,7 +358,6 @@ void Display::set_local_coordinates_relative_to_current(int x_offset, int y_offs
   p.y += y_offset;
 
   this->local_coordinate_.push_back(p);
-
 }
 void Display::pop_local_coordinates() {
   if (this->local_coordinate_.empty()) {
diff --git a/esphome/components/display/display.h b/esphome/components/display/display.h
index dc239e292a..7038d3781d 100644
--- a/esphome/components/display/display.h
+++ b/esphome/components/display/display.h
@@ -414,11 +414,11 @@ class Display : public PollingComponent {
 
 #ifdef USE_GRAPHICAL_LAYOUT
   /** Draw the graphical layout with the top corner at [x,y]
-   * 
+   *
    * @param x The x coordinate of the upper left corner
    * @param y The y coordinate of the upper left corner
    * @param layout The graphical layout to render
-   * 
+   *
   */
   void render_layout(int x, int y, graphical_layout::RootLayoutComponent *layout);
 #endif
@@ -513,16 +513,16 @@ class Display : public PollingComponent {
 
   /** Changes the local coordinates to be relative to (x, y). After calling a pixel
    *  drawn at (10, 20) would be drawn to the screen at (x + 10, y + 20)
-   * 
+   *
    * @param[in] x: x coordinate as the new local. Absolute to the displays underlying 0
    * @param[in] y: y coordinate as the new local. Absolute to the displays underlying 0
   */
   void set_local_coordinate(int x, int y) { this->local_coordinate_.push_back(Point(x, y)); };
 
   /** Changes the local coordinates to be to be (x_local + x_offset, y_local + y_offset)
-   *  After calling a pixel drawn at (10, 20) would be drawn to the screen at 
+   *  After calling a pixel drawn at (10, 20) would be drawn to the screen at
    *  (x_local + x_offset + 10, y_local + y_offset + 20)
-   * 
+   *
    * @param[in] x_offset: x offset from the current local. Relative to the local x
    * @param[in] y_offset: y offset from the current local. Relative to the local y
   */
@@ -533,7 +533,7 @@ class Display : public PollingComponent {
   void pop_local_coordinates();
 
   /** Gets the current local coordinates in the displays absolute coordinate system
-  */
+   */
   Point get_local_coordinates();
 
   /** Clears all the local coordinate systems and revers to the displays absolute coordinate
diff --git a/esphome/components/display/point.h b/esphome/components/display/point.h
index 63dabdfa05..6ed81d03e7 100644
--- a/esphome/components/display/point.h
+++ b/esphome/components/display/point.h
@@ -6,13 +6,13 @@ namespace esphome {
 namespace display {
 
 class Point {
-  public:
-    int16_t x;
-    int16_t y;
+ public:
+  int16_t x;
+  int16_t y;
 
-    Point() : x(VALUE_NO_SET), y(VALUE_NO_SET) {};
-    inline Point(int16_t x, int16_t y) ALWAYS_INLINE : x(x), y(y) {};
+  Point() : x(VALUE_NO_SET), y(VALUE_NO_SET) {};
+  inline Point(int16_t x, int16_t y) ALWAYS_INLINE : x(x), y(y) {};
 };
 
 }  // namespace display
-}  // namespace esphome
\ No newline at end of file
+}  // namespace esphome
diff --git a/esphome/components/graphical_layout/__init__.py b/esphome/components/graphical_layout/__init__.py
index c7fd044ac4..f98892714d 100644
--- a/esphome/components/graphical_layout/__init__.py
+++ b/esphome/components/graphical_layout/__init__.py
@@ -2,9 +2,9 @@ import esphome.codegen as cg
 import esphome.config_validation as cv
 from esphome.components import font, color
 from esphome.const import CONF_ID
-from esphome.components.graphical_layout import horizontal_stack
-from esphome.components.graphical_layout import vertical_stack
-from esphome.components.graphical_layout import text_panel
+from . import horizontal_stack
+from . import vertical_stack
+from . import text_panel
 
 graphical_layout_ns = cg.esphome_ns.namespace("graphical_layout")
 RootLayoutComponent = graphical_layout_ns.class_("RootLayoutComponent", cg.Component)
diff --git a/esphome/components/graphical_layout/container_layout_item.h b/esphome/components/graphical_layout/container_layout_item.h
index 870fd126bc..c477e200eb 100644
--- a/esphome/components/graphical_layout/container_layout_item.h
+++ b/esphome/components/graphical_layout/container_layout_item.h
@@ -14,15 +14,13 @@ namespace graphical_layout {
  *  It does not define what or how child items get used just that they exist for the item
 */
 class ContainerLayoutItem : public LayoutItem {
-  public:
+ public:
 
-    /** Adds an item to this container */
-    void add_item(LayoutItem *child) {
-      this->children_.push_back(child);
-    }
+  /** Adds an item to this container */
+  void add_item(LayoutItem *child) { this->children_.push_back(child); }
 
-  protected:
-    std::vector<LayoutItem *> children_;
+ protected:
+  std::vector<LayoutItem *> children_;
 };
 
 }
diff --git a/esphome/components/graphical_layout/graphical_layout.cpp b/esphome/components/graphical_layout/graphical_layout.cpp
index 5773b84aab..40341b350d 100644
--- a/esphome/components/graphical_layout/graphical_layout.cpp
+++ b/esphome/components/graphical_layout/graphical_layout.cpp
@@ -18,8 +18,8 @@ void RootLayoutComponent::dump_config() {
 
 void RootLayoutComponent::render_at(display::Display *display, int x, int y) {
   display->set_local_coordinate(x, y);
-    
-  display::Rect layout_rect = this->layout_root_->measure_item(display);
+
+  display::Rect layout _rect = this->layout_root_->measure_item(display);
   display::Rect clipping_rect = display::Rect(x, y, layout_rect.w, layout_rect.h);
 
   // TODO: Should clipping be relative to local?
diff --git a/esphome/components/graphical_layout/graphical_layout.h b/esphome/components/graphical_layout/graphical_layout.h
index cafc0ebf21..91c340a78f 100644
--- a/esphome/components/graphical_layout/graphical_layout.h
+++ b/esphome/components/graphical_layout/graphical_layout.h
@@ -10,7 +10,7 @@ namespace esphome {
 namespace display {
 class Display;
 class Rect;
-}
+}  // namespace display
 
 namespace graphical_layout {
 
@@ -21,11 +21,11 @@ public:
   void dump_config() override;
 
   /** Render the graphical layout to the screen
-   * 
+   *
    * param[in] display: Display that will be rendered to
    * param[in] x: x coordinate to render at
    * param[in] y: y coorindate to render at
-  */
+   */
   void render_at(display::Display *display, int x, int y);
   
   void set_layout_root(LayoutItem *layout) { this->layout_root_ = layout; };
diff --git a/esphome/components/graphical_layout/horizontal_stack.cpp b/esphome/components/graphical_layout/horizontal_stack.cpp
index 013c33db2b..f17295fcbd 100644
--- a/esphome/components/graphical_layout/horizontal_stack.cpp
+++ b/esphome/components/graphical_layout/horizontal_stack.cpp
@@ -7,7 +7,7 @@
 namespace esphome {
 namespace graphical_layout {
 
-static const char*TAG = "horizontalstack";
+static const char *TAG = "horizontalstack";
 
 void HorizontalStack::dump_config(int indent_depth, int additional_level_depth) {
   ESP_LOGCONFIG(TAG, "%*sItem Padding: %i", indent_depth, "", this->item_padding_);
@@ -47,5 +47,5 @@ void HorizontalStack::render(display::Display *display, display::Rect bounds) {
   }
 }
 
-}
-}
+}  // namespace graphical_layout
+}  // namespace esphome
diff --git a/esphome/components/graphical_layout/horizontal_stack.h b/esphome/components/graphical_layout/horizontal_stack.h
index da2bcedc2c..683ad82d0c 100644
--- a/esphome/components/graphical_layout/horizontal_stack.h
+++ b/esphome/components/graphical_layout/horizontal_stack.h
@@ -8,18 +8,18 @@ namespace graphical_layout {
 
 /**
  * The HorizontalStack is a UI element which will render a series of items left-to-right across a display
-*/
+ */
 class HorizontalStack : public ContainerLayoutItem {
-public:
+ public:
   const display::Rect measure_item(display::Display *display);
   void render(display::Display *display, display::Rect bounds);
 
   void dump_config(int indent_depth, int additional_level_depth);
   void set_item_padding(int item_padding) { this->item_padding_ = item_padding; };
 
-protected:
+ protected:
   int item_padding_{0};
 };
 
-}
-}
+}  // namespace graphical_layout
+}  // namespace esphome
diff --git a/esphome/components/graphical_layout/layout_item.h b/esphome/components/graphical_layout/layout_item.h
index d0e2334057..f71c4804ac 100644
--- a/esphome/components/graphical_layout/layout_item.h
+++ b/esphome/components/graphical_layout/layout_item.h
@@ -10,28 +10,28 @@ namespace graphical_layout {
 
 /** LayoutItem is the base from which all items derive from*/
 class LayoutItem {
-  public:
+ public:
 
-    /** Measures the item as it would be drawn on the display and returns the bounds for it 
-     * 
-     * param[in] display: Display that will be used for rendering. May be used to help with calculations
-    */
-    virtual const display::Rect measure_item(display::Display *display) = 0;
+  /** Measures the item as it would be drawn on the display and returns the bounds for it 
+   * 
+   * param[in] display: Display that will be used for rendering. May be used to help with calculations
+   */
+  virtual const display::Rect measure_item(display::Display *display) = 0;
 
-    /** Perform the rendering of the item to the display 
-     * 
-     * param[in] display: Display to render to
-     * param[in] bounds: Size of the area drawing should be constrained to
-    */
-    virtual void render(display::Display *display, display::Rect bounds) = 0;
+  /** Perform the rendering of the item to the display 
+   * 
+   * param[in] display: Display to render to
+   * param[in] bounds: Size of the area drawing should be constrained to
+   */
+  virtual void render(display::Display *display, display::Rect bounds) = 0;
 
-    /** 
-     * param[in] indent_depth: Depth to indent the config
-     * param[in] additional_level_depth: If children require their config to be dumped you increment
-     *  their indent_depth before calling it
-    */
-    virtual void dump_config(int indent_depth, int additional_level_depth) = 0;
+  /** 
+   * param[in] indent_depth: Depth to indent the config
+   * param[in] additional_level_depth: If children require their config to be dumped you increment
+   *  their indent_depth before calling it
+   */
+  virtual void dump_config(int indent_depth, int additional_level_depth) = 0;
 };
 
-}
-}
+}  // namespace graphical_layout
+}  // namespace esphome
diff --git a/esphome/components/graphical_layout/text_panel.cpp b/esphome/components/graphical_layout/text_panel.cpp
index 3c4ae131e6..bb3f96df1e 100644
--- a/esphome/components/graphical_layout/text_panel.cpp
+++ b/esphome/components/graphical_layout/text_panel.cpp
@@ -19,7 +19,8 @@ const display::Rect TextPanel::measure_item(display::Display *display) {
   int width;
   int height;
 
-  display->get_text_bounds(0, 0, this->text_.c_str(), this->font_, display::TextAlign::TOP_LEFT, &x1, &y1, &width, &height);
+  display->get_text_bounds(0, 0, this->text_.c_str(), this->font_, display::TextAlign::TOP_LEFT, &x1, &y1, &width,
+                           &height);
 
   return display::Rect(0, 0, width, height);
 }
@@ -28,5 +29,5 @@ void TextPanel::render(display::Display *display, display::Rect bounds) {
   display->print(0, 0, this->font_, this->foreground_color_, display::TextAlign::TOP_LEFT, this->text_.c_str());
 }
 
-}
-}
+}  // namespace graphical_layout
+}  // namespace esphome
diff --git a/esphome/components/graphical_layout/text_panel.h b/esphome/components/graphical_layout/text_panel.h
index 80e2aef184..6717562959 100644
--- a/esphome/components/graphical_layout/text_panel.h
+++ b/esphome/components/graphical_layout/text_panel.h
@@ -12,7 +12,7 @@ const Color COLOR_OFF(0, 0, 0, 0);
 
 /** The TextPanel is a UI item that renders a single line of text to a display */
 class TextPanel : public LayoutItem {
-public:
+ public:
   const display::Rect measure_item(display::Display *display);
   void render(display::Display *display, display::Rect bounds);
   void dump_config(int indent_depth, int additional_level_depth);
@@ -24,7 +24,7 @@ public:
   void set_background_color(Color background_color) { this->background_color_ = background_color; };
 
 
-protected:
+ protected:
   int item_padding_{0};
   std::string text_{};
   display::BaseFont *font_{nullptr};
@@ -32,5 +32,5 @@ protected:
   Color background_color_{COLOR_OFF};
 };
 
-}
-}
+}  // namespace graphical_layout
+}  // namespace esphome
diff --git a/esphome/components/graphical_layout/vertical_stack.cpp b/esphome/components/graphical_layout/vertical_stack.cpp
index 66cf8d1533..21c07d64d4 100644
--- a/esphome/components/graphical_layout/vertical_stack.cpp
+++ b/esphome/components/graphical_layout/vertical_stack.cpp
@@ -7,7 +7,7 @@
 namespace esphome {
 namespace graphical_layout {
 
-static const char*TAG = "verticalstack";
+static const char *TAG = "verticalstack";
 
 void VerticalStack::dump_config(int indent_depth, int additional_level_depth) {
   ESP_LOGCONFIG(TAG, "%*sItem Padding: %i", indent_depth, "", this->item_padding_);
@@ -46,5 +46,5 @@ void VerticalStack::render(display::Display *display, display::Rect bounds) {
   }
 }
 
-}
-}
+}  // namespace graphical_layout
+}  // namespace esphome
diff --git a/esphome/components/graphical_layout/vertical_stack.h b/esphome/components/graphical_layout/vertical_stack.h
index 12fbfa4ba7..d91edc09dc 100644
--- a/esphome/components/graphical_layout/vertical_stack.h
+++ b/esphome/components/graphical_layout/vertical_stack.h
@@ -3,23 +3,22 @@
 #include "esphome/components/graphical_layout/graphical_layout.h"
 #include "esphome/components/graphical_layout/container_layout_item.h"
 
-
 namespace esphome {
 namespace graphical_layout {
 
 /** The HorizontalStack is a UI element which will render a series of items top to bottom down a display
  */
 class VerticalStack : public ContainerLayoutItem {
-public:
+ public:
   const display::Rect measure_item(display::Display *display);
   void render(display::Display *display, display::Rect bounds);
 
   void dump_config(int indent_depth, int additional_level_depth);
   void set_item_padding(int item_padding) { this->item_padding_ = item_padding; };
 
-protected:
+ protected:
   int item_padding_{0};
 };
 
-}
-}
+}  // namespace graphical_layout
+}  // namespace esphome