diff --git a/res/shaders/UIPass.slang b/res/shaders/UIPass.slang
index 4dbfea0..5ede207 100644
--- a/res/shaders/UIPass.slang
+++ b/res/shaders/UIPass.slang
@@ -1,30 +1,76 @@
-struct VertexStageOutput
+struct RenderElementStyle
 {
-    float4 position : SV_Position;
-    float2 uvCoords : TEXCOORD;
+    float3 position;
+    uint backgroundImageIndex;
+    float3 backgroundColor;
+    float opacity;
+    //float4 borderBottomColor;
+    //float4 borderLeftColor;
+    //float4 borderRightColor;
+    //float4 borderTopColor;
+    //float borderBottomLeftRadius;
+    //float borderBottomRightRadius;
+    //float borderTopLeftRadius;
+    //float borderTopRightRadius;
+    float2 dimensions;
 };
 
+struct ViewData
+{
+    float4x4 projectionMatrix;
+};
+
+layout(set = 0, binding = 0)
+ConstantBuffer<ViewData> viewData;
+
+layout(set = 0, binding = 1)
+SamplerState backgroundSampler;
+
+layout(set = 0, binding = 2)
+ConstantBuffer<uint> numBackgroundTextures;
+
+layout(set = 0, binding = 3)
+Texture2D<float4> backgroundTextures[];
+
+struct VertexStageOutput
+{
+    float4 position  : SV_Position;
+    float2 texCoords : TEXCOORD;
+    RenderElementStyle style : RENDER_STYLE;
+};
 
 [shader("vertex")]
-VertexStageOutput vertexMain(uint vertexId : SV_VertexID)
+VertexStageOutput vertexMain(uint vertexId : SV_VertexID, RenderElementStyle style)
 {
-    float2 coordinates[4] = {
-        float2(0, 0),
-        float2(0, 1),
-        float2(1, 0),
-        float2(1, 1)
+    float xMin = style.position.x;
+    float xMax = xMin + style.dimensions.x;
+    float yMin = style.position.y;
+    float yMax = yMin + style.dimensions.y;
+    float4 coordinates[] = {
+        float4(xMin, yMin, 0, 0),
+        float4(xMin, yMax, 0, 1),
+        float4(xMax, yMin, 1, 0),
+        float4(xMax, yMax, 1, 1)
     };
     VertexStageOutput output;
-    output.uvCoords = coordinates[vertexId];
-    output.position = float4(output.uvCoords * 2 - 1, 1, 1);
+    output.position = mul(viewData.projectionMatrix, float4(coordinates[vertexId].xy, style.position.z, 1));
+    output.texCoords = coordinates[vertexId].zw;
+    output.style = style;
     return output;
 }
 
 [shader("fragment")]
 float4 fragmentMain(
     float4 position : SV_Position,
-    float2 uvCoords : TEXCOORD
+    float2 texCoords : TEXCOORD,
+    RenderElementStyle style : RENDER_STYLE
 ) : SV_Target
 {
-    return float4(0, 1, 0, 1);
+    float4 bgTextureColor = float4(1, 1, 1, 1);
+    uint imageIndex = style.backgroundImageIndex;
+    if(imageIndex < numBackgroundTextures)
+    {
+        bgTextureColor = backgroundTextures[imageIndex].Sample(backgroundSampler, texCoords);
+    }
+    return float4(style.backgroundColor, style.opacity) * bgTextureColor;
 }
\ No newline at end of file
diff --git a/res/shaders/uiFragment.glsl b/res/shaders/uiFragment.glsl
new file mode 100644
index 0000000..ff35dd0
--- /dev/null
+++ b/res/shaders/uiFragment.glsl
@@ -0,0 +1,103 @@
+#version 450
+#extension GL_EXT_nonuniform_qualifier : require
+layout(row_major) uniform;
+layout(row_major) buffer;
+
+#line 30 0
+layout(binding = 2)
+layout(std140) uniform _S1
+{
+    uint _data;
+} numBackgroundTextures_0;
+
+#line 33
+layout(binding = 3)
+uniform texture2D  backgroundTextures_0[];
+
+
+#line 27
+layout(binding = 1)
+uniform sampler backgroundSampler_0;
+
+
+#line 27
+layout(location = 0)
+out vec4 _S2;
+
+
+#line 63
+layout(location = 0)
+in vec2 _S3;
+
+
+#line 1
+layout(location = 1)
+in vec3 _S4;
+
+
+#line 1
+flat layout(location = 2)
+in uint _S5;
+
+
+#line 1
+layout(location = 3)
+in vec3 _S6;
+
+
+#line 1
+layout(location = 4)
+in float _S7;
+
+
+#line 1
+layout(location = 5)
+in vec2 _S8;
+
+
+#line 1
+struct RenderElementStyle_0
+{
+    vec3 position_0;
+    uint backgroundImageIndex_0;
+    vec3 backgroundColor_0;
+    float opacity_0;
+    vec2 dimensions_0;
+};
+
+
+#line 63
+void main()
+{
+    vec4 bgTextureColor_0;
+
+#line 63
+    RenderElementStyle_0 _S9 = RenderElementStyle_0(_S4, _S5, _S6, _S7, _S8);
+
+#line 69
+    const vec4 _S10 = vec4(float(1), float(1), float(1), float(1));
+
+#line 69
+    uint imageIndex_0 = _S9.backgroundImageIndex_0;
+
+    if(imageIndex_0 < numBackgroundTextures_0._data)
+    {
+        vec4 _S11 = (texture(sampler2D(backgroundTextures_0[imageIndex_0],backgroundSampler_0), (_S3)));
+
+#line 71
+        bgTextureColor_0 = _S11;
+    }
+    else
+    {
+
+#line 71
+        bgTextureColor_0 = _S10;
+    }
+
+#line 71
+    _S2 = vec4(_S9.backgroundColor_0, _S9.opacity_0) * bgTextureColor_0;
+
+#line 71
+    return;
+}
+
diff --git a/res/shaders/uiVertex.glsl b/res/shaders/uiVertex.glsl
new file mode 100644
index 0000000..292f66c
--- /dev/null
+++ b/res/shaders/uiVertex.glsl
@@ -0,0 +1,83 @@
+#version 450
+layout(row_major) uniform;
+layout(row_major) buffer;
+
+#line 1 0
+struct RenderElementStyle_0
+{
+    vec3 position_0;
+    uint backgroundImageIndex_0;
+    vec3 backgroundColor_0;
+    float opacity_0;
+    vec4 borderBottomColor_0;
+    vec4 borderLeftColor_0;
+    vec4 borderRightColor_0;
+    vec4 borderTopColor_0;
+    float borderBottomLeftRadius_0;
+    float borderBottomRightRadius_0;
+    float borderTopLeftRadius_0;
+    float borderTopRightRadius_0;
+    vec2 dimensions_0;
+};
+
+
+#line 33
+layout(std430, binding = 3) readonly buffer _S1 {
+    RenderElementStyle_0 _data[];
+} elements_0;
+
+#line 33
+layout(location = 0)
+out vec2 _S2;
+
+
+#line 33
+layout(location = 1)
+out uint _S3;
+
+
+
+struct VertexStageOutput_0
+{
+    vec4 position_1;
+    vec2 texCoords_0;
+    uint elementId_0;
+};
+
+
+void main()
+{
+
+#line 46
+    uint _S4 = uint(gl_VertexIndex);
+
+#line 46
+    uint _S5 = uint(gl_InstanceIndex);
+
+    RenderElementStyle_0 style_0 = ((elements_0)._data[(_S5)]);
+    float xMin_0 = style_0.position_0.x;
+    float xMax_0 = xMin_0 + style_0.dimensions_0.x;
+    float yMin_0 = style_0.position_0.y;
+    float yMax_0 = yMin_0 + style_0.dimensions_0.y;
+    vec4  coordinates_0[4] = { vec4(xMin_0, yMin_0, float(0), float(0)), vec4(xMin_0, yMax_0, float(0), float(1)), vec4(xMax_0, yMin_0, float(1), float(0)), vec4(xMax_0, yMax_0, float(1), float(1)) };
+
+#line 59
+    VertexStageOutput_0 output_0;
+    output_0.position_1 = vec4(coordinates_0[_S4].xy, style_0.position_0.z, float(1));
+    output_0.texCoords_0 = coordinates_0[_S4].zw;
+    output_0.elementId_0 = _S5;
+    VertexStageOutput_0 _S6 = output_0;
+
+#line 63
+    gl_Position = _S6.position_1;
+
+#line 63
+    _S2 = _S6.texCoords_0;
+
+#line 63
+    _S3 = _S6.elementId_0;
+
+#line 63
+    return;
+}
+
diff --git a/src/Engine/Graphics/GraphicsResources.cpp b/src/Engine/Graphics/GraphicsResources.cpp
index d65261f..03c140e 100644
--- a/src/Engine/Graphics/GraphicsResources.cpp
+++ b/src/Engine/Graphics/GraphicsResources.cpp
@@ -210,12 +210,12 @@ StructuredBuffer::~StructuredBuffer()
 
 bool StructuredBuffer::updateContents(const BulkResourceData& resourceData) 
 {
-	assert(contents.size() == resourceData.size);
-	if(std::memcmp(contents.data(), resourceData.data, contents.size()) == 0)
+	assert(contents.size() >= resourceData.size);
+	if(std::memcmp(contents.data(), resourceData.data, resourceData.size) == 0)
 	{
 		return false;
 	}
-	std::memcpy(contents.data(), resourceData.data, contents.size());
+	std::memcpy(contents.data(), resourceData.data, resourceData.size);
 	return true;
 }
 VertexBuffer::VertexBuffer(QueueFamilyMapping mapping, uint32 numVertices, uint32 vertexSize, QueueType startQueueType)
diff --git a/src/Engine/Graphics/GraphicsResources.h b/src/Engine/Graphics/GraphicsResources.h
index 7dfb08c..f0c47c8 100644
--- a/src/Engine/Graphics/GraphicsResources.h
+++ b/src/Engine/Graphics/GraphicsResources.h
@@ -362,12 +362,12 @@ class VertexBuffer : public Buffer
 public:
     VertexBuffer(QueueFamilyMapping mapping, uint32 numVertices, uint32 vertexSize, QueueType startQueueType);
     virtual ~VertexBuffer();
-    inline uint32 getNumVertices()
+    constexpr uint32 getNumVertices() const
     {
         return numVertices;
     }
     // Size of one vertex in bytes
-    inline uint32 getVertexSize()
+    constexpr uint32 getVertexSize() const
     {
         return vertexSize;
     }
diff --git a/src/Engine/Graphics/RenderPass/TextPass.cpp b/src/Engine/Graphics/RenderPass/TextPass.cpp
index 55c9010..50f53cd 100644
--- a/src/Engine/Graphics/RenderPass/TextPass.cpp
+++ b/src/Engine/Graphics/RenderPass/TextPass.cpp
@@ -21,7 +21,7 @@ void TextPass::beginFrame()
     for(TextRender& render : passData.texts)
     {
         FontData& fontData = getFontData(render.font);
-        TextResources& resources = textResources.add();
+        TextResources& resources = textResources[render.font].add();
         Array<GlyphInstanceData> instanceData;
         float x = render.position.x;
         float y = render.position.y;
@@ -67,16 +67,19 @@ void TextPass::render()
 {
     graphics->beginRenderPass(renderPass);
     Array<Gfx::PRenderCommand> commands;
-    for(TextResources& resources : textResources)
+    for(const auto& [fontAsset, resources] : textResources)
     {
         Gfx::PRenderCommand command = graphics->createRenderCommand("TextPassCommand");
         command->setViewport(viewport);
         command->bindPipeline(pipeline);
-        command->bindDescriptor({generalSet, resources.textureArraySet});
-        command->bindVertexBuffer({VertexInputStream(0, 0, resources.vertexBuffer)});
-        
-        command->pushConstants(pipelineLayout, Gfx::SE_SHADER_STAGE_VERTEX_BIT | Gfx::SE_SHADER_STAGE_FRAGMENT_BIT, 0, sizeof(TextData), &resources.textData);
-        command->draw(4, static_cast<uint32>(resources.vertexBuffer->getNumVertices()), 0, 0);
+        for(const auto& resource : resources)
+        {
+            command->bindDescriptor({generalSet, resource.textureArraySet});
+            command->bindVertexBuffer({VertexInputStream(0, 0, resource.vertexBuffer)});
+            
+            command->pushConstants(pipelineLayout, Gfx::SE_SHADER_STAGE_VERTEX_BIT | Gfx::SE_SHADER_STAGE_FRAGMENT_BIT, 0, sizeof(TextData), &resource.textData);
+            command->draw(4, static_cast<uint32>(resource.vertexBuffer->getNumVertices()), 0, 0);
+        }
         commands.add(command);
     }
     graphics->executeCommands(commands);
diff --git a/src/Engine/Graphics/RenderPass/TextPass.h b/src/Engine/Graphics/RenderPass/TextPass.h
index d0fd87d..0912929 100644
--- a/src/Engine/Graphics/RenderPass/TextPass.h
+++ b/src/Engine/Graphics/RenderPass/TextPass.h
@@ -65,7 +65,7 @@ private:
         Gfx::PDescriptorSet textureArraySet;
         TextData textData;
     };
-    Array<TextResources> textResources;
+    std::map<PFontAsset, Array<TextResources>> textResources;
 
     Gfx::PRenderTargetAttachment renderTarget;
     Gfx::PRenderTargetAttachment depthAttachment;
diff --git a/src/Engine/Graphics/RenderPass/UIPass.cpp b/src/Engine/Graphics/RenderPass/UIPass.cpp
index 7efc8bc..59246fa 100644
--- a/src/Engine/Graphics/RenderPass/UIPass.cpp
+++ b/src/Engine/Graphics/RenderPass/UIPass.cpp
@@ -17,6 +17,23 @@ UIPass::~UIPass()
 
 void UIPass::beginFrame() 
 {
+    VertexBufferCreateInfo info = {
+        .resourceData = {
+            .size = (uint32)(sizeof(UI::RenderElementStyle) * passData.renderElements.size()),
+            .data = (uint8*)passData.renderElements.data()
+        },
+        .vertexSize = sizeof(UI::RenderElementStyle),
+        .numVertices = (uint32)passData.renderElements.size(),
+    };
+    elementBuffer = graphics->createVertexBuffer(info);
+    uint32 numTextures = passData.usedTextures.size();
+    numTexturesBuffer->updateContents({
+        .size = sizeof(uint32),
+        .data = (uint8*)&numTextures,
+    });
+    descriptorSet->updateBuffer(2, numTexturesBuffer);
+    descriptorSet->updateTextureArray(3, passData.usedTextures);
+    descriptorSet->writeChanges();
     //co_return;
 }
 
@@ -26,7 +43,9 @@ void UIPass::render()
     Gfx::PRenderCommand command = graphics->createRenderCommand("UIPassCommand");
     command->setViewport(viewport);
     command->bindPipeline(pipeline);
-    command->draw(4, 1, 0, 0);
+    command->bindVertexBuffer({VertexInputStream(0, 0, elementBuffer)});
+    command->bindDescriptor(descriptorSet);
+    command->draw(4, passData.renderElements.size(), 0, 0);
     graphics->executeCommands(Array<Gfx::PRenderCommand>({command}));
     graphics->endRenderPass();
     //co_return;
@@ -72,8 +91,84 @@ void UIPass::createRenderPass()
     createInfo.name = "UIFragment";
     createInfo.entryPoint =  "fragmentMain";
     fragmentShader = graphics->createFragmentShader(createInfo);
-    declaration = graphics->createVertexDeclaration({});
+    Array<Gfx::VertexElement> decl;
+    decl.add({
+        .streamIndex = 0,
+        .offset = offsetof(UI::RenderElementStyle, position),
+        .vertexFormat = Gfx::SE_FORMAT_R32G32B32_SFLOAT,
+        .attributeIndex = 0,
+        .stride = sizeof(UI::RenderElementStyle),
+        .bInstanced = 1
+    });
+    decl.add({
+        .streamIndex = 0,
+        .offset = offsetof(UI::RenderElementStyle, backgroundImageIndex),
+        .vertexFormat = Gfx::SE_FORMAT_R32_UINT,
+        .attributeIndex = 1,
+        .stride = sizeof(UI::RenderElementStyle),
+        .bInstanced = 1
+    });
+    decl.add({
+        .streamIndex = 0,
+        .offset = offsetof(UI::RenderElementStyle, backgroundColor),
+        .vertexFormat = Gfx::SE_FORMAT_R32G32B32_SFLOAT,
+        .attributeIndex = 2,
+        .stride = sizeof(UI::RenderElementStyle),
+        .bInstanced = 1
+    });
+    decl.add({
+        .streamIndex = 0,
+        .offset = offsetof(UI::RenderElementStyle, opacity),
+        .vertexFormat = Gfx::SE_FORMAT_R32_SFLOAT,
+        .attributeIndex = 3,
+        .stride = sizeof(UI::RenderElementStyle),
+        .bInstanced = 1
+    });
+    decl.add({
+        .streamIndex = 0,
+        .offset = offsetof(UI::RenderElementStyle, dimensions),
+        .vertexFormat = Gfx::SE_FORMAT_R32G32_SFLOAT,
+        .attributeIndex = 4,
+        .stride = sizeof(UI::RenderElementStyle),
+        .bInstanced = 1
+    });
+    declaration = graphics->createVertexDeclaration(decl);
+
+    descriptorLayout = graphics->createDescriptorLayout("UIDescriptorLayout");
+    descriptorLayout->addDescriptorBinding(0, Gfx::SE_DESCRIPTOR_TYPE_UNIFORM_BUFFER);
+    descriptorLayout->addDescriptorBinding(1, Gfx::SE_DESCRIPTOR_TYPE_SAMPLER);
+    descriptorLayout->addDescriptorBinding(2, Gfx::SE_DESCRIPTOR_TYPE_UNIFORM_BUFFER);
+    descriptorLayout->addDescriptorBinding(3, Gfx::SE_DESCRIPTOR_TYPE_SAMPLED_IMAGE, 256, Gfx::SE_DESCRIPTOR_BINDING_VARIABLE_DESCRIPTOR_COUNT_BIT | Gfx::SE_DESCRIPTOR_BINDING_PARTIALLY_BOUND_BIT);
+    descriptorLayout->create();
+
+    Matrix4 projectionMatrix = glm::ortho(0, 1, 1, 0);
+    UniformBufferCreateInfo info = {
+        .resourceData = {
+            .size = sizeof(Matrix4),
+            .data = (uint8*)&projectionMatrix,
+        },
+        .bDynamic = false,
+    };
+    Gfx::PUniformBuffer uniformBuffer = graphics->createUniformBuffer(info);
+    Gfx::PSamplerState backgroundSampler = graphics->createSamplerState({});
+
+    info = {
+        .resourceData = {
+            .size = sizeof(uint32),
+            .data = nullptr
+        },
+        .bDynamic = true,
+    };
+
+    numTexturesBuffer = graphics->createUniformBuffer(info);
+
+    descriptorSet = descriptorLayout->allocateDescriptorSet();
+    descriptorSet->updateBuffer(0, uniformBuffer);
+    descriptorSet->updateSampler(1, backgroundSampler);
+    descriptorSet->writeChanges();
+
     pipelineLayout = graphics->createPipelineLayout();
+    pipelineLayout->addDescriptorLayout(0, descriptorLayout);
     pipelineLayout->create();
 
     Gfx::PRenderTargetLayout layout = new Gfx::RenderTargetLayout(renderTarget, depthAttachment);
diff --git a/src/Engine/Graphics/RenderPass/UIPass.h b/src/Engine/Graphics/RenderPass/UIPass.h
index 2e50cd0..84692c8 100644
--- a/src/Engine/Graphics/RenderPass/UIPass.h
+++ b/src/Engine/Graphics/RenderPass/UIPass.h
@@ -9,7 +9,8 @@ DECLARE_NAME_REF(Gfx, Texture2D)
 DECLARE_NAME_REF(Gfx, RenderTargetAttachment)
 struct UIPassData
 {
-    const UI::RenderHierarchy hierarchy;
+    Array<UI::RenderElementStyle> renderElements;
+    Array<Gfx::PTexture> usedTextures;
 };
 class UIPass : public RenderPass<UIPassData>
 {
@@ -26,6 +27,12 @@ private:
     Gfx::PRenderTargetAttachment depthAttachment;
     Gfx::PTexture2D depthBuffer;
 
+    Gfx::PDescriptorLayout descriptorLayout;
+    Gfx::PDescriptorSet descriptorSet;
+
+    Gfx::PUniformBuffer numTexturesBuffer;
+    Gfx::PVertexBuffer elementBuffer;
+
     Gfx::PVertexDeclaration declaration;
     Gfx::PVertexShader vertexShader;
     Gfx::PFragmentShader fragmentShader;
diff --git a/src/Engine/Graphics/Vulkan/VulkanDescriptorSets.cpp b/src/Engine/Graphics/Vulkan/VulkanDescriptorSets.cpp
index e35cf3c..2ef63f4 100644
--- a/src/Engine/Graphics/Vulkan/VulkanDescriptorSets.cpp
+++ b/src/Engine/Graphics/Vulkan/VulkanDescriptorSets.cpp
@@ -128,7 +128,7 @@ void DescriptorSet::updateBuffer(uint32_t binding, Gfx::PUniformBuffer uniformBu
     UniformBuffer* cachedBuffer = reinterpret_cast<UniformBuffer*>(cachedData[binding]);
     if(vulkanBuffer->isDataEquals(cachedBuffer))
     {
-        std::cout << "uniform data equal, skip" << std::endl; 
+        //std::cout << "uniform data equal, skip" << std::endl; 
         return;
     }
     bufferInfos.add(init::DescriptorBufferInfo(vulkanBuffer->getHandle(), 0, vulkanBuffer->getSize()));
diff --git a/src/Engine/UI/Elements/CMakeLists.txt b/src/Engine/UI/Elements/CMakeLists.txt
index cf0bd4f..5b13ba7 100644
--- a/src/Engine/UI/Elements/CMakeLists.txt
+++ b/src/Engine/UI/Elements/CMakeLists.txt
@@ -1,4 +1,6 @@
 target_sources(Engine
     PRIVATE
         Element.h
-        Element.cpp)
\ No newline at end of file
+        Element.cpp
+        Panel.h
+        Panel.cpp)
\ No newline at end of file
diff --git a/src/Engine/UI/Elements/Element.cpp b/src/Engine/UI/Elements/Element.cpp
index b76f323..b0a9cb7 100644
--- a/src/Engine/UI/Elements/Element.cpp
+++ b/src/Engine/UI/Elements/Element.cpp
@@ -1,5 +1,6 @@
 #include "Element.h"
 #include "UI/System.h"
+#include "Graphics/Graphics.h"
 
 using namespace Seele;
 using namespace Seele::UI;
diff --git a/src/Engine/UI/Elements/Element.h b/src/Engine/UI/Elements/Element.h
index ada0271..b803b73 100644
--- a/src/Engine/UI/Elements/Element.h
+++ b/src/Engine/UI/Elements/Element.h
@@ -36,7 +36,6 @@ protected:
     PSystem system;
     PElement parent;
     Array<PElement> children;
-    friend class Layout;
     friend class RenderElement;
 };
 DEFINE_REF(Element)
diff --git a/src/Engine/UI/Elements/Panel.cpp b/src/Engine/UI/Elements/Panel.cpp
new file mode 100644
index 0000000..ce5e965
--- /dev/null
+++ b/src/Engine/UI/Elements/Panel.cpp
@@ -0,0 +1,15 @@
+#include "Panel.h"
+#include "UI/Layout.h"
+
+using namespace Seele;
+using namespace Seele::UI;
+
+Panel::Panel()
+{
+    
+}
+
+Panel::~Panel()
+{
+    
+}
\ No newline at end of file
diff --git a/src/Engine/UI/Elements/Panel.h b/src/Engine/UI/Elements/Panel.h
index afc7509..69b4f0d 100644
--- a/src/Engine/UI/Elements/Panel.h
+++ b/src/Engine/UI/Elements/Panel.h
@@ -5,12 +5,16 @@ namespace Seele
 {
 namespace UI
 {
+DECLARE_REF(Layout)
 class Panel : Element
 {
 public:
     Panel();
     virtual ~Panel();
+private:
+    PLayout activeLayout;
 };
+
 DEFINE_REF(Panel);
 } // namespace UI
 } // namespace Seele
diff --git a/src/Engine/UI/HorizontalLayout.cpp b/src/Engine/UI/HorizontalLayout.cpp
index dd57f75..3363ffa 100644
--- a/src/Engine/UI/HorizontalLayout.cpp
+++ b/src/Engine/UI/HorizontalLayout.cpp
@@ -1,4 +1,5 @@
 #include "HorizontalLayout.h"
+#include "Elements/Element.h"
 
 using namespace Seele;
 using namespace Seele::UI;
diff --git a/src/Engine/UI/Layout.cpp b/src/Engine/UI/Layout.cpp
index 7a91fc3..b65d226 100644
--- a/src/Engine/UI/Layout.cpp
+++ b/src/Engine/UI/Layout.cpp
@@ -1,4 +1,5 @@
 #include "Layout.h"
+#include "Elements/Element.h"
 
 using namespace Seele;
 using namespace Seele::UI;
diff --git a/src/Engine/UI/Layout.h b/src/Engine/UI/Layout.h
index 6b77ed0..46e8fe9 100644
--- a/src/Engine/UI/Layout.h
+++ b/src/Engine/UI/Layout.h
@@ -1,10 +1,11 @@
 #pragma once
-#include "Elements/Element.h"
+#include "MinimalEngine.h"
 
 namespace Seele
 {
 namespace UI
 {
+DECLARE_REF(Element);
 class Layout
 {
 public:
diff --git a/src/Engine/UI/RenderHierarchy.h b/src/Engine/UI/RenderHierarchy.h
index adc9486..0623685 100644
--- a/src/Engine/UI/RenderHierarchy.h
+++ b/src/Engine/UI/RenderHierarchy.h
@@ -9,23 +9,20 @@ namespace UI
 {
 struct RenderElementStyle
 {
-    Vector2 position;
-    Vector2 dimensions;
-    Vector backgroundColor;
-    uint32 backgroundImageIndex;
-    Vector4 borderBottomColor;
-    Vector4 borderLeftColor;
-    Vector4 borderRightColor;
-    Vector4 borderTopColor;
-    float borderBottomLeftRadius;
-    float borderBottomRightRadius;
-    float borderTopLeftRadius;
-    float borderTopRightRadius;
-    Vector4 fontColor;
-    float fontSize;
-    float opacity;
+    Vector position = Vector(0, 0, 0);
+    uint32 backgroundImageIndex = -1;
+    Vector backgroundColor = Vector(1, 1, 1);
+    float opacity = 1.0f;
+    //Vector4 borderBottomColor = Vector4(1, 1, 1, 1);
+    //Vector4 borderLeftColor = Vector4(1, 1, 1, 1);
+    //Vector4 borderRightColor = Vector4(1, 1, 1, 1);
+    //Vector4 borderTopColor = Vector4(1, 1, 1, 1);
+    //float borderBottomLeftRadius = 0;
+    //float borderBottomRightRadius = 0;
+    //float borderTopLeftRadius = 0;
+    //float borderTopRightRadius = 0;
+    Vector2 dimensions = Vector2(1, 1);
 };
-static_assert(sizeof(RenderElementStyle) == 34*4);
 class RenderElement
 {
 public:
diff --git a/src/Engine/UI/System.cpp b/src/Engine/UI/System.cpp
index 56d897e..f87df71 100644
--- a/src/Engine/UI/System.cpp
+++ b/src/Engine/UI/System.cpp
@@ -1,5 +1,8 @@
 #include "System.h"
 #include "Elements/Panel.h"
+#include "Graphics/Graphics.h"
+#include "Asset/AssetRegistry.h"
+#include "Asset/TextureAsset.h"
 
 using namespace Seele;
 using namespace Seele::UI;
@@ -13,3 +16,33 @@ System::~System()
 {
     
 }
+
+void System::update()
+{
+    
+}
+
+UIPassData System::getUIPassData()
+{
+    UIPassData uiPassData;
+    RenderElementStyle& style = uiPassData.renderElements.add();
+    style.position = Vector(0, 0, -0.1);
+    style.dimensions = Vector2(0.4, 0.4);
+    style.backgroundColor = Vector(0.2, 0.3, 0.1);
+    style.backgroundImageIndex = 0;
+    uiPassData.usedTextures.add(AssetRegistry::findTexture("")->getTexture());
+    return uiPassData;
+}
+
+TextPassData System::getTextPassData()
+{
+    TextPassData textPassData;
+    TextRender& render = textPassData.texts.add();
+    render.font = AssetRegistry::findFont("Calibri");
+    render.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis magna ex. Morbi ullamcorper fringilla risus eget vehicula. Praesent vel quam vel ante molestie gravida vitae ac enim. Donec vitae eleifend orci. Phasellus at sodales lorem, ac eleifend turpis. Vivamus vitae condimentum lacus, a bibendum neque. Ut et est ut felis varius vehicula. Etiam lorem magna, dapibus vitae felis in, vulputate suscipit neque. Aenean facilisis ac risus et scelerisque. Ut tincidunt eros quis posuere iaculis. Curabitur justo lacus, molestie id varius vel, sodales efficitur diam. Integer orci velit, condimentum sit amet turpis sit amet, congue blandit nisl. Donec pretium ligula id mauris pretium commodo. Mauris quis lectus mi. In blandit, dolor non accumsan venenatis, ipsum erat congue neque, quis elementum orci nunc vel justo. ";
+    //render.text = "Seele Engine";
+    render.position = Vector2(0.f, 300.f);
+    render.scale = 0.1f;
+    render.textColor = Vector4(1, 0, 0, 1);
+    return textPassData;
+}
diff --git a/src/Engine/UI/System.h b/src/Engine/UI/System.h
index 4f2641a..6381cec 100644
--- a/src/Engine/UI/System.h
+++ b/src/Engine/UI/System.h
@@ -1,6 +1,8 @@
 #pragma once
 #include "MinimalEngine.h"
 #include "RenderHierarchy.h"
+#include "Graphics/RenderPass/UIPass.h"
+#include "Graphics/RenderPass/TextPass.h"
 
 namespace Seele
 {
@@ -12,9 +14,12 @@ class System
 public:
     System();
     virtual ~System();
+    void update();
+    UIPassData getUIPassData();
+    TextPassData getTextPassData();
 private:
     PPanel rootPanel;
-    Array<RenderHierarchyUpdate*> updates;
+    RenderHierarchy hierarchy;
 };
 DEFINE_REF(System)
 } // namespace UI
diff --git a/src/Engine/UI/VerticalLayout.cpp b/src/Engine/UI/VerticalLayout.cpp
index cfa0355..76de71d 100644
--- a/src/Engine/UI/VerticalLayout.cpp
+++ b/src/Engine/UI/VerticalLayout.cpp
@@ -1,4 +1,5 @@
 #include "VerticalLayout.h"
+#include "Elements/Element.h"
 
 using namespace Seele;
 using namespace Seele::UI;
diff --git a/src/Engine/Window/InspectorView.cpp b/src/Engine/Window/InspectorView.cpp
index 4b4ae30..724b7c5 100644
--- a/src/Engine/Window/InspectorView.cpp
+++ b/src/Engine/Window/InspectorView.cpp
@@ -3,6 +3,7 @@
 #include "Scene/Actor/Actor.h"
 #include "Window.h"
 #include "Asset/AssetRegistry.h"
+#include "UI/System.h"
 
 using namespace Seele;
 
@@ -10,6 +11,7 @@ InspectorView::InspectorView(Gfx::PGraphics graphics, PWindow window, const View
     : View(graphics, window, createInfo, "InspectorView")
     , uiPass(UIPass(graphics, viewport, new Gfx::SwapchainAttachment(window->getGfxHandle())))
     , textPass(TextPass(graphics, viewport, new Gfx::SwapchainAttachment(window->getGfxHandle())))
+    , uiSystem(new UI::System())
 {
     AssetRegistry::importFile("./fonts/Calibri.ttf");
     PRenderGraphResources resources = new RenderGraphResources();
@@ -19,13 +21,6 @@ InspectorView::InspectorView(Gfx::PGraphics graphics, PWindow window, const View
     textPass.publishOutputs();
     uiPass.createRenderPass();
     textPass.createRenderPass();
-    TextRender& render = textPassData.texts.add();
-    render.font = AssetRegistry::findFont("Calibri");
-    render.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis magna ex. Morbi ullamcorper fringilla risus eget vehicula. Praesent vel quam vel ante molestie gravida vitae ac enim. Donec vitae eleifend orci. Phasellus at sodales lorem, ac eleifend turpis. Vivamus vitae condimentum lacus, a bibendum neque. Ut et est ut felis varius vehicula. Etiam lorem magna, dapibus vitae felis in, vulputate suscipit neque. Aenean facilisis ac risus et scelerisque. Ut tincidunt eros quis posuere iaculis. Curabitur justo lacus, molestie id varius vel, sodales efficitur diam. Integer orci velit, condimentum sit amet turpis sit amet, congue blandit nisl. Donec pretium ligula id mauris pretium commodo. Mauris quis lectus mi. In blandit, dolor non accumsan venenatis, ipsum erat congue neque, quis elementum orci nunc vel justo. ";
-    //render.text = "Seele Engine";
-    render.position = Vector2(0.f, 300.f);
-    render.scale = 0.1f;
-    render.textColor = Vector4(1, 0, 0, 1);
 }
 
 InspectorView::~InspectorView() 
@@ -48,7 +43,8 @@ void InspectorView::commitUpdate()
 
 void InspectorView::prepareRender() 
 {
-    textPass.updateViewFrame(textPassData);
+    uiPass.updateViewFrame(uiSystem->getUIPassData());
+    textPass.updateViewFrame(uiSystem->getTextPassData());
 }
 
 void InspectorView::render() 
diff --git a/src/Engine/Window/InspectorView.h b/src/Engine/Window/InspectorView.h
index af75dd5..31a5b9f 100644
--- a/src/Engine/Window/InspectorView.h
+++ b/src/Engine/Window/InspectorView.h
@@ -28,7 +28,7 @@ protected:
     UIPassData uiPassData;
     TextPassData textPassData;
 
-    UI::PPanel rootPanel;
+    UI::PSystem uiSystem;
     PActor selectedActor;
     
 	virtual void keyCallback(KeyCode code, InputAction action, KeyModifier modifier) override;
diff --git a/src/Engine/main.cpp b/src/Engine/main.cpp
index 0276733..5d9b92d 100644
--- a/src/Engine/main.cpp
+++ b/src/Engine/main.cpp
@@ -19,7 +19,7 @@ int main()
     mainWindowInfo.pixelFormat = Gfx::SE_FORMAT_B8G8R8A8_UNORM;
     auto window = windowManager->addWindow(mainWindowInfo);
     ViewportCreateInfo sceneViewInfo;
-    sceneViewInfo.sizeX = 680;
+    sceneViewInfo.sizeX = 640;
     sceneViewInfo.sizeY = 720;
     sceneViewInfo.offsetX = 0;
     sceneViewInfo.offsetY = 0;