diff --git a/data/layout.xml b/data/layout.xml
index f4b26b5..85840af 100644
--- a/data/layout.xml
+++ b/data/layout.xml
@@ -34,7 +34,9 @@
       </plane>
       <!-- content panel -->
       <plane width="1" grow="1" height="100%" pad="30" wrap="1">
-        <border thickness="5" border-color="1" color=".4" height="100%"></border>
+        <border thickness="5" border-color="1" color=".4" height="100%">
+          <shape type="round-rect" width="100%" height="100%"></shape>
+        </border>
       </plane>
     </plane>
     <!-- status bar -->
diff --git a/engine.vcxproj b/engine.vcxproj
index 0476470..256c9e9 100644
--- a/engine.vcxproj
+++ b/engine.vcxproj
@@ -151,6 +151,7 @@
   </ItemDefinitionGroup>
   <ItemGroup>
     <ClCompile Include="engine\app.cpp" />
+    <ClCompile Include="engine\font.cpp" />
     <ClCompile Include="engine\image.cpp" />
     <ClCompile Include="engine\layout.cpp" />
     <ClCompile Include="engine\main.cpp" />
@@ -184,6 +185,7 @@
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="engine\app.h" />
+    <ClInclude Include="engine\font.h" />
     <ClInclude Include="engine\image.h" />
     <ClInclude Include="engine\layout.h" />
     <ClInclude Include="engine\pch.h" />
diff --git a/engine.vcxproj.filters b/engine.vcxproj.filters
index bb20b84..4e815b3 100644
--- a/engine.vcxproj.filters
+++ b/engine.vcxproj.filters
@@ -48,6 +48,9 @@
     <ClCompile Include="engine\layout.cpp">
       <Filter>Source Files</Filter>
     </ClCompile>
+    <ClCompile Include="engine\font.cpp">
+      <Filter>Source Files</Filter>
+    </ClCompile>
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="engine\app.h">
@@ -71,5 +74,8 @@
     <ClInclude Include="engine\layout.h">
       <Filter>Header Files</Filter>
     </ClInclude>
+    <ClInclude Include="engine\font.h">
+      <Filter>Header Files</Filter>
+    </ClInclude>
   </ItemGroup>
 </Project>
\ No newline at end of file
diff --git a/engine/font.cpp b/engine/font.cpp
index 8562dd0..f0c44fd 100644
--- a/engine/font.cpp
+++ b/engine/font.cpp
@@ -1,3 +1,4 @@
+#include "pch.h"
 #include "font.h"
 
 
diff --git a/engine/image.cpp b/engine/image.cpp
index b46446f..de117c0 100644
--- a/engine/image.cpp
+++ b/engine/image.cpp
@@ -1,7 +1,6 @@
 #include "pch.h"
 #include "image.h"
 
-#define STB_IMAGE_IMPLEMENTATION
 #include <stb/stb_image.h>
 
 bool Image::load(std::string filename)
diff --git a/engine/layout.cpp b/engine/layout.cpp
index 64c18f9..bd1b50c 100644
--- a/engine/layout.cpp
+++ b/engine/layout.cpp
@@ -182,6 +182,9 @@ void Node::load_internal(const tinyxml2::XMLElement* x_node)
     case kWidget::Border:
         m_widget = std::make_unique<WidgetBorder>();
         break;
+    case kWidget::Shape:
+        m_widget = std::make_unique<WidgetShape>();
+        break;
     }
     
     while (attr)
@@ -190,6 +193,9 @@ void Node::load_internal(const tinyxml2::XMLElement* x_node)
         attr = attr->Next();
     }
 
+    if (m_widget)
+        m_widget->create();
+
     auto x_child = x_node->FirstChildElement();
     while (x_child)
     {
diff --git a/engine/layout.h b/engine/layout.h
index 72f3c32..df6d273 100644
--- a/engine/layout.h
+++ b/engine/layout.h
@@ -5,7 +5,8 @@
 
 enum class kAttribute : uint16_t 
 {
-    Width       = const_hash("width"), 
+    id          = const_hash("id"),
+    Width       = const_hash("width"),
     MinWidth    = const_hash("max-width"),
     MaxWidth    = const_hash("min-width"),
     Height      = const_hash("height"),
@@ -23,11 +24,22 @@ enum class kAttribute : uint16_t
     Color       = const_hash("color"),
     Thickness   = const_hash("thickness"),
     BorderColor = const_hash("border-color"),
+    Type        = const_hash("type"),
 };
 
 enum class kWidget : uint16_t
 {
     Border = const_hash("border"),
+    Shape  = const_hash("shape"),
+};
+
+enum class kShapeType : uint16_t
+{
+    Quad        = const_hash("rect"),
+    Poly        = const_hash("poly"),
+    RoundRect   = const_hash("round-rect"),
+    Slice9      = const_hash("slice9"),
+
 };
 
 class Widget
@@ -35,8 +47,9 @@ class Widget
 public:
     glm::mat4 mvp;
     glm::vec4 clip;
-    virtual void draw() { };
-    virtual void parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr) { };
+    virtual void create() { }
+    virtual void draw() { }
+    virtual void parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr) { }
 };
 
 class WidgetBorder : public Widget
@@ -89,6 +102,85 @@ public:
     }
 };
 
+class WidgetShape : public Widget
+{
+public:
+    std::unique_ptr<Shape> m_shape;
+    kShapeType m_type;
+    glm::vec4 m_color;
+    glm::vec4 m_border_color;
+    float m_thinkness{ 1 };
+    float m_radius{ .5f };
+    virtual void create() override
+    {
+        switch (m_type)
+        {
+        case kShapeType::Quad:
+            m_shape = std::make_unique<Plane>();
+            ((Plane*)m_shape.get())->create<1>(1, 1);
+            break;
+        case kShapeType::Poly:
+            m_shape = std::make_unique<Circle>();
+            ((Circle*)m_shape.get())->create<5>(m_radius);
+            break;
+        case kShapeType::RoundRect:
+            m_shape = std::make_unique<Rounded>();
+            ((Rounded*)m_shape.get())->create<3>(1, 1, .1f);
+            break;
+        case kShapeType::Slice9:
+            m_shape = std::make_unique<Slice9>();
+            ((Slice9*)m_shape.get())->create(1, 1, .1f, .1f);
+            break;
+        default:
+            break;
+        }
+    }
+    virtual void draw() override
+    {
+        ShaderManager::use(kShader::Color);
+        ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
+
+        ShaderManager::u_vec4(kShaderUniform::Col, m_color);
+        m_shape->draw_fill();
+
+        glLineWidth(m_thinkness);
+        ShaderManager::u_vec4(kShaderUniform::Col, m_border_color);
+        m_shape->draw_stroke();
+    }
+    virtual void parse_attributes(kAttribute id, const tinyxml2::XMLAttribute* attr)
+    {
+        switch (id)
+        {
+        case kAttribute::Color:
+        {
+            glm::vec4 pad;
+            int n = sscanf(attr->Value(), "%f %f %f %f", &pad.x, &pad.y, &pad.z, &pad.w);
+            if (n == 1)
+                m_color = glm::vec4(pad.x);
+            else
+                m_color = pad;
+            break;
+        }
+        case kAttribute::BorderColor:
+        {
+            glm::vec4 pad;
+            int n = sscanf(attr->Value(), "%f %f %f %f", &pad.x, &pad.y, &pad.z, &pad.w);
+            if (n == 1)
+                m_border_color = glm::vec4(pad.x);
+            else
+                m_border_color = pad;
+            break;
+        }
+        case kAttribute::Thickness:
+            m_thinkness = attr->FloatValue();
+            break;
+        case kAttribute::Type:
+            m_type = (kShapeType)const_hash(attr->Value());
+            break;
+        }
+    }
+};
+
 class Node
 {
     const Node* parent{ nullptr };
diff --git a/engine/pch.cpp b/engine/pch.cpp
index 1d9f38c..96d5754 100644
--- a/engine/pch.cpp
+++ b/engine/pch.cpp
@@ -1 +1,7 @@
 #include "pch.h"
+
+#define STB_TRUETYPE_IMPLEMENTATION
+#include <stb/stb_truetype.h>
+
+#define STB_IMAGE_IMPLEMENTATION
+#include <stb/stb_image.h>
diff --git a/engine/pch.h b/engine/pch.h
index 43a5e1c..3f02b1e 100644
--- a/engine/pch.h
+++ b/engine/pch.h
@@ -33,4 +33,4 @@
 
 #include <tinyxml2.h>
 #include <yoga/Yoga.h>
-#endif
\ No newline at end of file
+#endif