diff --git a/data/layout.xml b/data/layout.xml
index 7b63bcb..e1ea914 100644
--- a/data/layout.xml
+++ b/data/layout.xml
@@ -240,6 +240,47 @@
     </node>
   </layout>
 
+  <!--grids panel-->
+  <layout id="tpl-panel-grid">
+    <node width="220" margin="0 0 10 0" rtl="ltr">
+      <border height="30" color=".5" align="center" justify="center">
+        <text text="Grids" font-face="arial" font-size="11" color="1 1 1 1"/>
+      </border>
+      <border color=".3" pad="5" dir="col" width="100%">
+        <border color=".2" height="20" justify="center" align="center"><text text="Ground" font-face="arial" font-size="11"/></border>
+        <node dir="row">
+          <node width="30%" dir="col">
+            <node height="20" justify="center"><text text="Opacity" font-face="arial" font-size="11"/></node>
+            <node height="20" justify="center"><text text="Scale" font-face="arial" font-size="11"/></node>
+            <node height="20" justify="center"><text text="Value" font-face="arial" font-size="11"/></node>
+            <node height="20" justify="center"><text text="Height" font-face="arial" font-size="11"/></node>
+          </node>
+          <border dir="col" align="center" grow="1" width="1" flood-events="1">
+            <node height="20" pad="1" width="100%"><slider-h id="grid-ground-opacity"/></node>
+            <node height="20" pad="1" width="100%"><slider-h id="grid-ground-scale" value="0.5"/></node>
+            <node height="20" pad="1" width="100%"><slider-h id="grid-ground-value" value="0.5"/></node>
+            <node height="20" pad="1" width="100%"><slider-h id="grid-ground-height" value="0.5"/></node>
+          </border>
+        </node>
+        <border color=".2" height="20" justify="center" align="center"><text text="Box" font-face="arial" font-size="11"/></border>
+        <node dir="row">
+          <node width="30%" dir="col">
+            <node height="20" justify="center"><text text="Opacity" font-face="arial" font-size="11"/></node>
+            <node height="20" justify="center"><text text="Width" font-face="arial" font-size="11"/></node>
+            <node height="20" justify="center"><text text="Height" font-face="arial" font-size="11"/></node>
+            <node height="20" justify="center"><text text="Depth" font-face="arial" font-size="11"/></node>
+          </node>
+          <border dir="col" align="center" grow="1" width="1" flood-events="1">
+            <node height="20" pad="1" width="100%"><slider-h id="grid-box-opacity"/></node>
+            <node height="20" pad="1" width="100%"><slider-h id="grid-box-width" value="0.5"/></node>
+            <node height="20" pad="1" width="100%"><slider-h id="grid-box-height" value="0.5"/></node>
+            <node height="20" pad="1" width="100%"><slider-h id="grid-box-depth" value="0.5"/></node>
+          </border>
+        </node>
+      </border>
+    </node>
+  </layout>
+  
   <layout id="message-box">
     <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
       <border thickness="1" border-color=".2" pad="3">
@@ -769,6 +810,9 @@
           <button-custom id="btn-layer" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
             <image path="data/ui/layers.png" width="100%" height="100%" align="center" justify="flex-end"/>
           </button-custom>
+          <button-custom id="btn-grids-panel" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
+            <image path="data/ui/grid.png" width="100%" height="100%" align="center" justify="flex-end" mips="true"/>
+          </button-custom>
         </border>
         <!-- side bar -->
         <node height="100%" dir="row" shrink="1">
@@ -781,10 +825,13 @@
             <!--<panel-layer id="panel-layer"/>-->
             <!--Colors-->
             <!--<panel-color id="panel-color"/>-->
+            <!--Grids-->
+            <!--<panel-grid/>-->
           </scroll>
         </node>
         <!-- timeline -->
-        <!--<node height="100%" width="1" grow="1" dir="col" justify="flex-start" rtl="ltr">
+        <!--
+        <node height="100%" width="1" grow="1" dir="col" justify="flex-start" rtl="ltr">
           <border color=".3 .3 .3 .4" height="50" width="100%" pad="10" dir="row">
             <text text="Timeline: " font-face="arial" font-size="11" margin="8 10 0 0"/>
             <slider-h id="frames-slider" width="1" grow="1" margin="0 10 0 0"></slider-h>
@@ -792,7 +839,31 @@
               <text id="timeline-frame" text="00" font-face="arial" font-size="30"/>
             </node>
           </border>
+        </node>
+        -->
+        
+        <!--<node height="100%" width="1" grow="1" dir="col" align="center" justify="flex-start" rtl="ltr">
+          <border border-color="0 0 0 0" thickness="2" color=".2 .2 .2 .6" pad="10" dir="row" margin="2 0 0 0">
+            <node dir="col">
+              <node dir="row" align="center" margin="0 0 2 0">
+                <slider-h id="pitch-slider" value="0.5" width="200" height="15"></slider-h>
+                <text text="Pitch" font-face="arial" font-size="11" margin="0 0 0 10"/>
+              </node>
+              <node dir="row" align="center" margin="0 0 2 0">
+                <slider-h id="yaw-slider" value="0.5" width="200" height="15"></slider-h>
+                <text text="Yaw" font-face="arial" font-size="11" margin="0 0 0 10"/>
+              </node>
+              <node dir="row" align="center">
+                <slider-h id="roll-slider" value="0.5" width="200" height="15"></slider-h>
+                <text text="Roll" font-face="arial" font-size="11" margin="0 0 0 10"/>
+              </node>
+            </node>
+            <button-custom margin="0 0 0 10" thickness="1" border-color=".1" pad="5" justify="center">
+              <text text="Apply" font-face="arial" font-size="11"/>
+            </button-custom>
+          </border>
         </node>-->
+      
       </node>
       <!-- status bar -->
       <!--<border height="30" width="100%" color=".15" border-color=".3" dir="row" pad="0 0 0 10" align="center">
diff --git a/engine.vcxproj b/engine.vcxproj
index 9aaf9de..1e510a9 100644
--- a/engine.vcxproj
+++ b/engine.vcxproj
@@ -207,6 +207,7 @@
     <ClCompile Include="engine\node_message_box.cpp" />
     <ClCompile Include="engine\node_panel_brush.cpp" />
     <ClCompile Include="engine\node_panel_color.cpp" />
+    <ClCompile Include="engine\node_panel_grid.cpp" />
     <ClCompile Include="engine\node_panel_layer.cpp" />
     <ClCompile Include="engine\node_panel_stroke.cpp" />
     <ClCompile Include="engine\node_popup_menu.cpp" />
@@ -317,6 +318,7 @@
     <ClInclude Include="engine\node_message_box.h" />
     <ClInclude Include="engine\node_panel_brush.h" />
     <ClInclude Include="engine\node_panel_color.h" />
+    <ClInclude Include="engine\node_panel_grid.h" />
     <ClInclude Include="engine\node_panel_layer.h" />
     <ClInclude Include="engine\node_panel_stroke.h" />
     <ClInclude Include="engine\node_popup_menu.h" />
diff --git a/engine.vcxproj.filters b/engine.vcxproj.filters
index 8c602a4..9d7a3ca 100644
--- a/engine.vcxproj.filters
+++ b/engine.vcxproj.filters
@@ -246,6 +246,9 @@
     <ClCompile Include="libs\yoga\yoga\Yoga.c">
       <Filter>libs\yoga</Filter>
     </ClCompile>
+    <ClCompile Include="engine\node_panel_grid.cpp">
+      <Filter>Source Files\ui</Filter>
+    </ClCompile>
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="engine\app.h">
@@ -434,6 +437,9 @@
     <ClInclude Include="libs\yoga\yoga\Yoga.h">
       <Filter>libs\yoga</Filter>
     </ClInclude>
+    <ClInclude Include="engine\node_panel_grid.h">
+      <Filter>Source Files\ui</Filter>
+    </ClInclude>
   </ItemGroup>
   <ItemGroup>
     <ResourceCompile Include="PanoPainter.rc">
diff --git a/engine/app.cpp b/engine/app.cpp
index f01802e..9a83d3a 100644
--- a/engine/app.cpp
+++ b/engine/app.cpp
@@ -262,6 +262,7 @@ void App::init()
     glDisable(GL_DEPTH_TEST);
 #if defined(_WIN32) || defined(__OSX__)
     glEnable(GL_PROGRAM_POINT_SIZE);
+    glEnable(GL_LINE_SMOOTH);
 #endif
     glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
     glBlendEquation(GL_FUNC_ADD);
diff --git a/engine/app.h b/engine/app.h
index 60f44ab..05b37be 100644
--- a/engine/app.h
+++ b/engine/app.h
@@ -30,6 +30,7 @@
 #ifdef __ANDROID__
 #include "main.h"
 #endif
+#include "node_panel_grid.h"
 
 class App
 {
@@ -59,6 +60,7 @@ public:
     std::shared_ptr<NodePanelLayer> layers;
     std::shared_ptr<NodePanelColor> color;
     std::shared_ptr<NodePanelStroke> stroke;
+    std::shared_ptr<NodePanelGrid> grid;
     std::shared_ptr<NodePanelBrushPreset> presets;
     NodeCanvas* canvas;
     Node* current_panel = nullptr;
diff --git a/engine/app_layout.cpp b/engine/app_layout.cpp
index 7f2a29a..93d0d89 100644
--- a/engine/app_layout.cpp
+++ b/engine/app_layout.cpp
@@ -136,6 +136,12 @@ void App::init_sidebar()
     stroke->create();
     stroke->loaded();
 
+    grid = std::make_shared<NodePanelGrid>();
+    grid->m_manager = &layout;
+    grid->init();
+    grid->create();
+    grid->loaded();
+
     presets = std::make_shared<NodePanelBrushPreset>();
     presets->m_manager = &layout;
     presets->init();
@@ -240,6 +246,14 @@ void App::init_sidebar()
             button->set_color(panels->get_child_index(layers.get()) == -1 ? color_button_normal : color_button_hlight);
         };
     }
+    if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-grids-panel"))
+    {
+        button->on_click = [this, button](Node*) {
+            panels->get_child_index(grid.get()) == -1 ? panels->add_child(grid) : panels->remove_child(grid.get());
+            panels->fix_scroll();
+            button->set_color(panels->get_child_index(grid.get()) == -1 ? color_button_normal : color_button_hlight);
+        };
+    }
 }
 
 void App::init_toolbar_draw()
diff --git a/engine/node.cpp b/engine/node.cpp
index 9a425fa..9c53c26 100644
--- a/engine/node.cpp
+++ b/engine/node.cpp
@@ -30,6 +30,7 @@
 #include "node_combobox.h"
 #include "node_colorwheel.h"
 #include "node_dialog_picker.h"
+#include "node_panel_grid.h"
 
 void Node::async_start()
 {
@@ -885,6 +886,7 @@ void Node::load_internal(const tinyxml2::XMLElement* x_node)
             CASE(kWidget::PanelBrush, NodePanelBrush);
             CASE(kWidget::PanelColor, NodePanelColor);
             CASE(kWidget::PanelStroke, NodePanelStroke);
+            CASE(kWidget::PanelGrid, NodePanelGrid);
             CASE(kWidget::ColorQuad, NodeColorQuad);
             CASE(kWidget::StrokePreview, NodeStrokePreview);
             CASE(kWidget::Canvas, NodeCanvas);
diff --git a/engine/node.h b/engine/node.h
index dca9933..026175e 100644
--- a/engine/node.h
+++ b/engine/node.h
@@ -40,6 +40,7 @@ enum class kAttribute : uint16_t
     Range = const_hash("range"),
     AspectRatio = const_hash("aspect-ratio"),
     ComboList = const_hash("combo-list"),
+    Mips = const_hash("mips"),
     Default = const_hash("default"),
     RTL = const_hash("rtl"),
 };
@@ -69,6 +70,7 @@ enum class kWidget : uint16_t
     PanelBrush = const_hash("panel-brush"),
     PanelColor = const_hash("panel-color"),
     PanelStroke = const_hash("panel-stroke"),
+    PanelGrid = const_hash("panel-grid"),
     ColorQuad = const_hash("color-quad"),
     StrokePreview = const_hash("stroke-preview"),
     Canvas = const_hash("canvas"),
diff --git a/engine/node_canvas.cpp b/engine/node_canvas.cpp
index b2d5d93..30ef596 100644
--- a/engine/node_canvas.cpp
+++ b/engine/node_canvas.cpp
@@ -29,6 +29,8 @@ void NodeCanvas::init()
     for (int i = 0; i < (int)ui::Canvas::kCanvasMode::COUNT; i++)
         for (auto m : ui::Canvas::modes[i])
             m->init();
+
+    m_grid.create(1, 1, m_grid_divs);
 }
 
 void NodeCanvas::restore_context()
@@ -74,7 +76,7 @@ void NodeCanvas::draw()
     //m_canvas->m_cam_rot = m_pan * 0.003f;
 
     glm::mat4 ortho_proj = glm::ortho(0.f, box.z, 0.f, box.w, -1000.f, 1000.f);
-    glm::mat4 proj = glm::perspective(glm::radians(m_canvas->m_cam_fov), box.z / box.w, 0.1f, 1000.f);
+    glm::mat4 proj = glm::perspective(glm::radians(m_canvas->m_cam_fov), box.z / box.w, 0.01f, 1000.f);
     glm::mat4 camera = glm::eulerAngleXY(m_canvas->m_cam_rot.y, m_canvas->m_cam_rot.x) *
         glm::translate(m_canvas->m_cam_pos);
 
@@ -114,6 +116,17 @@ void NodeCanvas::draw()
     glEnable(GL_DEPTH_TEST);
     glClear(GL_DEPTH_BUFFER_BIT);
 
+    float pitch = 0;
+    if (auto slider = root()->find<NodeSliderH>("pitch-slider"))
+        pitch = (slider->get_value() - 0.5) * glm::half_pi<float>();
+    float yaw = 0;
+    if (auto slider = root()->find<NodeSliderH>("yaw-slider"))
+        yaw = (slider->get_value() - 0.5) * glm::half_pi<float>();
+    float roll = 0;
+    if (auto slider = root()->find<NodeSliderH>("roll-slider"))
+        roll = (slider->get_value() - 0.5) * glm::half_pi<float>();
+
+
     for (size_t i = 0; i < m_canvas->m_order.size(); i++)
     {
         auto layer_index = m_canvas->m_order[i];
@@ -125,6 +138,7 @@ void NodeCanvas::draw()
             int z = (int)m_canvas->m_order.size() - i;
             auto plane_mvp_z = proj * camera * 
                 glm::scale(glm::vec3(z + 1)) * 
+                glm::eulerAngleYXZ(yaw, pitch, roll) *
                 m_canvas->m_plane_transform[plane_index] * 
                 glm::translate(glm::vec3(0, 0, -1));
             
@@ -261,6 +275,25 @@ void NodeCanvas::draw()
         for (auto& mode : ui::Canvas::modes[(int)ui::Canvas::kCanvasMode::Grid])
             mode->on_Draw(ortho_proj, proj, camera);
 
+    int grid_divs = glm::floor(App::I.grid->m_groud_scale->get_value() * 100);
+    if (grid_divs != m_grid_divs && (grid_divs % 2) == 0)
+    {
+        m_grid_divs = grid_divs;
+        m_grid.create(1, 1, grid_divs);
+    }
+    float grid_scale = m_grid_divs * 0.01f;
+
+    ui::ShaderManager::use(kShader::Color);
+    ui::ShaderManager::u_vec4(kShaderUniform::Col, glm::vec4(
+        glm::vec3(App::I.grid->m_groud_value->get_value()),
+        App::I.grid->m_groud_opacity->get_value()));
+    ui::ShaderManager::u_mat4(kShaderUniform::MVP, proj * camera
+        * glm::translate(glm::vec3(0, (App::I.grid->m_groud_height->get_value() - 0.5f) * 2.f, 0))
+        * glm::eulerAngleX(glm::radians(90.f))
+        * glm::scale(glm::vec3(grid_scale, grid_scale, 1))
+    );
+    m_grid.draw_stroke();
+
     //ui::ShaderManager::use(kShader::Equirect);
     //ui::ShaderManager::u_mat4(kShaderUniform::MVP, glm::scale(glm::vec3(.5, .5, 1)));
     //ui::ShaderManager::u_int(kShaderUniform::Tex, 0);
diff --git a/engine/node_canvas.h b/engine/node_canvas.h
index 26abbfb..3e4bfbf 100644
--- a/engine/node_canvas.h
+++ b/engine/node_canvas.h
@@ -12,6 +12,8 @@ public:
     Sampler m_sampler_stencil;
     ui::Plane m_face_plane;
     ui::LineSegment m_line;
+    ui::Plane m_grid;
+    int m_grid_divs = 30;
     virtual Node* clone_instantiate() const override;
     virtual void init() override;
     virtual void restore_context() override;
diff --git a/engine/node_image.cpp b/engine/node_image.cpp
index f104942..570e829 100644
--- a/engine/node_image.cpp
+++ b/engine/node_image.cpp
@@ -5,11 +5,14 @@
 
 ui::Plane NodeImage::m_plane;
 Sampler NodeImage::m_sampler;
+Sampler NodeImage::m_sampler_mips;
 
 void NodeImage::static_init()
 {
     m_plane.create<1>(1, 1);
     m_sampler.create();
+    m_sampler_mips.create();
+    m_sampler_mips.set_filter(GL_LINEAR_MIPMAP_LINEAR, GL_LINEAR);
 }
 
 Node* NodeImage::clone_instantiate() const
@@ -51,6 +54,9 @@ void NodeImage::parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* at
     Node::parse_attributes(ka, attr);
     switch (ka)
     {
+    case kAttribute::Mips:
+        m_use_mipmaps = attr->BoolValue();
+        break;
     case kAttribute::Path:
         m_path = attr->Value();
         m_tex_id = const_hash(attr->Value());
@@ -75,7 +81,8 @@ void NodeImage::draw()
 {
     using namespace ui;
     TextureManager::get(m_tex_id).bind();
-    m_sampler.bind(0);
+    auto& sampler = m_use_mipmaps ? m_sampler_mips : m_sampler;
+    sampler.bind(0);
     glEnable(GL_BLEND);
     if (m_use_atlas)
     {
@@ -90,7 +97,7 @@ void NodeImage::draw()
     ui::ShaderManager::u_int(kShaderUniform::Tex, 0);
     ui::ShaderManager::u_mat4(kShaderUniform::MVP, m_mvp);
     m_plane.draw_fill();
-    m_sampler.unbind();
+    sampler.unbind();
     TextureManager::get(m_tex_id).unbind();
     glDisable(GL_BLEND);
 }
diff --git a/engine/node_image.h b/engine/node_image.h
index 8229031..cc8efc2 100644
--- a/engine/node_image.h
+++ b/engine/node_image.h
@@ -8,6 +8,7 @@ class NodeImage : public Node
 public:
     static ui::Plane m_plane;
     static Sampler m_sampler;
+    static Sampler m_sampler_mips;
     bool m_use_atlas = false;
     bool m_use_mipmaps = false;
     glm::vec4 m_region;
diff --git a/engine/shape.cpp b/engine/shape.cpp
index e1a3228..6bea13a 100644
--- a/engine/shape.cpp
+++ b/engine/shape.cpp
@@ -8,6 +8,8 @@ bool Shape::create_buffers(GLvoid* idx, GLvoid* vertices, int isize, int vsize)
 {
     use_idx = true;
 
+    destroy();
+
     glGenBuffers(2, buffers);
     if (!(buffers[0] && buffers[1]))
         return false;
@@ -43,6 +45,8 @@ bool Shape::create_buffers(GLvoid* vertices, int vsize)
 {
     use_idx = false;
 
+    destroy();
+
     glGenBuffers(1, buffers);
     if (!buffers[0])
         return false;
@@ -166,7 +170,7 @@ bool RectShape::create(float w, float h)
 void Plane::create_impl(float w, float h, int div, GLushort *idx, Shape::vertex_t *vertices)
 {
     count[0] = div * div * 6;
-    count[1] = 8;
+    count[1] = (div + 1) * 4;
     ioff[0] = (GLvoid*)0;
     ioff[1] = (GLvoid*)(count[0] * sizeof(GLushort));
     
@@ -203,15 +207,28 @@ void Plane::create_impl(float w, float h, int div, GLushort *idx, Shape::vertex_
             i++;
         }
     }
-    // outline indices
-    *idx++ = 0;                 // A
-    *idx++ = (div+1)*(div);     // B
-    *idx++ = (div+1)*(div);     // B
-    *idx++ = (div+1)*(div+1)-1; // C
-    *idx++ = (div+1)*(div+1)-1; // C
-    *idx++ = div;               // D
-    *idx++ = div;               // D
-    *idx++ = 0;                 // A
+
+    // generate indices
+    for (int y = 0; y <= div; y++)
+    {
+        int i = y * (div + 1);
+        
+        *idx++ = i;
+        *idx++ = i + div;
+        
+        *idx++ = y;
+        *idx++ = y + div * (div + 1);
+    }
+// 
+//     // outline indices
+//     *idx++ = 0;                 // A
+//     *idx++ = (div+1)*(div);     // B
+//     *idx++ = (div+1)*(div);     // B
+//     *idx++ = (div+1)*(div+1)-1; // C
+//     *idx++ = (div+1)*(div+1)-1; // C
+//     *idx++ = div;               // D
+//     *idx++ = div;               // D
+//     *idx++ = 0;                 // A
 }
 void ui::Plane::update_vertices(const glm::vec4* data, const glm::vec2* uvs, const glm::vec2* uvs2)
 {
diff --git a/engine/shape.h b/engine/shape.h
index cfbba69..fa9b2a1 100644
--- a/engine/shape.h
+++ b/engine/shape.h
@@ -24,13 +24,19 @@ public:
     bool create_buffers(GLvoid* vertices, int vsize);
     void draw_fill() const;
     void draw_stroke() const;
-    virtual bool create_attrib() { return true; };
-    ~Shape()
+    void destroy()
     {
         glDeleteBuffers(2, buffers);
 #if USE_VBO
         glDeleteVertexArrays(2, arrays);
 #endif // USE_VBO
+        buffers[0] = buffers[1] = 0;
+        arrays[0] = arrays[1] = 0;
+    }
+    virtual bool create_attrib() { return true; };
+    ~Shape()
+    {
+        destroy();
     }
 protected:
     glm::vec2 quad_mid_point(glm::vec2 a, glm::vec2 b, glm::vec2 c, glm::vec2 d)
@@ -95,11 +101,20 @@ public:
     template<int div>
     bool create(float w, float h)
     {
-        static GLushort idx[div * div * 6 + 8];
+        static GLushort idx[div * div * 6 + (div + 1) * 4];
         static vertex_t vertices[(div+1)*(div+1)];
         create_impl(w, h, div, idx, vertices);
         return create_buffers(idx, vertices, sizeof(idx), sizeof(vertices));
     }
+    bool create(float w, float h, int div)
+    {
+        int idx_size = div * div * 6 + (div + 1) * 4;
+        int vertices_size = (div + 1)*(div + 1);
+        auto idx = std::make_unique<GLushort[]>(idx_size);
+        auto vertices = std::make_unique<vertex_t[]>(vertices_size);
+        create_impl(w, h, div, idx.get(), vertices.get());
+        return create_buffers(idx.get(), vertices.get(), sizeof(GLushort) * idx_size, sizeof(vertex_t) * vertices_size);
+    }
     void update_vertices(const glm::vec4* data, const glm::vec2* uvs = nullptr, const glm::vec2* uvs2 = nullptr);
 /*
     bool create(att::Divisions divisions, att::Width w, att::Height h)