diff --git a/data/layout2.xml b/data/layout2.xml
new file mode 100644
index 0000000..723fb3c
--- /dev/null
+++ b/data/layout2.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0"?>
+<root>
+  <layout id="popup">
+  </layout>
+  <layout id="main">
+    <border dir="col" wrap="0" width="100%" height="100%" pad="10" color="0">
+      <!--menu bar-->
+      <border width="100%" height="25" color=".2" dir="row"
+              flood-events="1" pad="0" margin="0 0 10 0">
+        <button-custom pad="5" dir="row" align="center">
+          <text text="File" font-face="arial" font-size="11"></text>
+        </button-custom>
+        <button-custom pad="5" dir="row" align="center">
+          <text text="Modify" font-face="arial" font-size="11"></text>
+        </button-custom>
+        <button-custom pad="5" dir="row" align="center">
+          <text text="View" font-face="arial" font-size="11"></text>
+        </button-custom>
+        <button-custom pad="5" dir="row" align="center">
+          <text text="Layers" font-face="arial" font-size="11"></text>
+        </button-custom>
+      </border>
+        <!--toolbar-->
+      <border width="100%" height="60" color=".2" dir="row" 
+              flood-events="1" pad="5">
+        <button-custom color=".3" width="50" pad="5">
+          <icon icon="add"></icon>
+        </button-custom>
+        <button id="btn-popup" text="Do Something" margin="0 0 0 10" height="100%" width="100"/>
+      </border>
+      <!--central row-->
+      <node width="100%" height="100" pad="10 0 10 0" dir="row" grow="1">
+        <!--sidebar-->
+        <border color=".1" border-color=".4" thickness="1" 
+                width="300" height="100%" margin="0 10 0 0"></border>
+        <!--viewport-->
+        <border grow="1" color=".1" pad="10">
+          <viewport grow="1"></viewport>
+        </border>
+      </node>
+      <!--status bar-->
+      <border color=".1" width="100%" height="50" dir="row" pad="10" align="center">
+        <text text="Status message" font-face="arial" font-size="11"></text>
+      </border>
+    </border>
+  </layout>
+</root>
diff --git a/data/spritesheet.txt b/data/spritesheet.txt
index ff5cd41..be42b30 100644
--- a/data/spritesheet.txt
+++ b/data/spritesheet.txt
@@ -544,7 +544,7 @@ lorry_error 16 16 513 447
 lorry_flatbed 16 16 539 447
 lorry_go 16 16 565 447
 lorry_link 16 16 591 447
-magifier_zoom_out 16 16 617 447
+magnifier_zoom_out 16 16 617 447
 magnifier 16 16 643 447
 magnifier_zoom_in 16 16 669 447
 male 16 16 695 447
diff --git a/engine/app.cpp b/engine/app.cpp
index dfc5c80..b315e8f 100644
--- a/engine/app.cpp
+++ b/engine/app.cpp
@@ -127,70 +127,70 @@ void App::init()
     NodeIcon::static_init();
 
     layout.on_loaded = [&] {
-        layout[main_id].update(width, height);
-        if (auto* button = layout[main_id].find<NodeButton>("btn-close"))
+        layout[main_id]->update(width, height);
+        if (auto* button = layout[main_id]->find<NodeButton>("btn-close"))
         {
             button->on_click = [] { exit(0); };
         }
-        if (auto* button = layout[main_id].find<NodeButton>("btn-popup"))
+        if (auto* button = layout[main_id]->find<NodeButton>("btn-popup"))
         {
             button->on_click = [this] { 
                 msgbox = new NodeMessageBox();
                 msgbox->m_manager = &layout;
                 msgbox->init();
-                layout[main_id].add_child(msgbox);
-                layout[main_id].update();
+                layout[main_id]->add_child(msgbox);
+                layout[main_id]->update();
             };
         }
-        if (auto* button = layout[main_id].find<NodeButtonCustom>("btn-settings"))
+        if (auto* button = layout[main_id]->find<NodeButtonCustom>("btn-settings"))
         {
             button->on_click = [this] { 
                 settings = new NodeSettings();
                 settings->m_manager = &layout;
                 settings->init();
-                layout[main_id].add_child(settings);
-                layout[main_id].update();
+                layout[main_id]->add_child(settings);
+                layout[main_id]->update();
             };
         }
-        if (auto* menu_file = layout[main_id].find<NodeButtonCustom>("menu-file"))
+        if (auto* menu_file = layout[main_id]->find<NodeButtonCustom>("menu-file"))
         {
             menu_file->on_click = [=] { 
                 glm::vec2 pos = menu_file->m_pos + glm::vec2(0, menu_file->m_size.y);
-                popup = (NodePopupMenu*)layout[const_hash("file-menu")].m_children[0]->clone();
+                popup = (NodePopupMenu*)layout[const_hash("file-menu")]->m_children[0]->clone();
                 popup->SetPositioning(YGPositionTypeAbsolute);
                 popup->SetPosition(pos.x, pos.y);
-                layout[main_id].add_child(popup);
-                layout[main_id].update();
+                layout[main_id]->add_child(popup);
+                layout[main_id]->update();
             };
         }
-        if (auto* menu_file = layout[main_id].find<NodeButtonCustom>("menu-edit"))
+        if (auto* menu_file = layout[main_id]->find<NodeButtonCustom>("menu-edit"))
         {
             menu_file->on_click = [=] {
                 glm::vec2 pos = menu_file->m_pos + glm::vec2(0, menu_file->m_size.y);
-                popup = (NodePopupMenu*)layout[const_hash("edit-menu")].m_children[0]->clone();
+                popup = (NodePopupMenu*)layout[const_hash("edit-menu")]->m_children[0]->clone();
                 popup->SetPositioning(YGPositionTypeAbsolute);
                 popup->SetPosition(pos.x, pos.y);
-                layout[main_id].add_child(popup);
-                layout[main_id].update();
+                layout[main_id]->add_child(popup);
+                layout[main_id]->update();
             };
         }
-        if (auto* menu_file = layout[main_id].find<NodeButtonCustom>("menu-layers"))
+        if (auto* menu_file = layout[main_id]->find<NodeButtonCustom>("menu-layers"))
         {
             menu_file->on_click = [=] {
                 glm::vec2 pos = menu_file->m_pos + glm::vec2(0, menu_file->m_size.y);
-                popup = (NodePopupMenu*)layout[const_hash("layers-menu")].m_children[0]->clone();
+                popup = (NodePopupMenu*)layout[const_hash("layers-menu")]->m_children[0]->clone();
                 popup->SetPositioning(YGPositionTypeAbsolute);
                 popup->SetPosition(pos.x, pos.y);
-                layout[main_id].add_child(popup);
-                layout[main_id].update();
+                layout[main_id]->add_child(popup);
+                layout[main_id]->update();
             };
         }
-        if (auto* toolbar = layout[main_id].find<Node>("toolbar"))
+        if (auto* toolbar = layout[main_id]->find<Node>("toolbar"))
         {
             toolbar->m_flood_events = true;
         }
     };
-    layout.load("data/layout.xml");
+    layout.load("data/layout2.xml");
 
     //msgbox->find<NodeButton>("btn-ok")->on_click = [] { exit(0); };
 //     msgbox->find<NodeButton>("btn-ok")->m_text->m_text = "DO";
@@ -240,7 +240,7 @@ void App::update(float dt)
 
     auto observer = [this](Node* n)
     {
-        if (n->m_display)
+        if (n && n->m_display)
         {
             auto box = n->m_clip;
             glScissor((int)box.x-1, (int)(height - box.y - box.w)-1, (int)box.z+2, (int)box.w+2);
@@ -249,7 +249,8 @@ void App::update(float dt)
     };
     glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
     glEnable(GL_SCISSOR_TEST);
-    layout[main_id].watch(observer);
+    if (auto* main = layout[main_id])
+        main->watch(observer);
     //msgbox->watch(observer);
     glDisable(GL_SCISSOR_TEST); 
 }
@@ -258,7 +259,8 @@ void App::resize(float w, float h)
 {
     width = w;
     height = h;
-    layout[main_id].update(w, h);
+    if (auto* main = layout[main_id])
+        main->update(w, h);
 }
 
 void App::mouse_down(int button, float x, float y)
@@ -266,7 +268,7 @@ void App::mouse_down(int button, float x, float y)
     MouseEvent e;
     e.m_type = button ? kEventType::MouseDownR : kEventType::MouseDownL;
     e.m_pos = { x, y };
-    layout[main_id].on_event(&e);
+    layout[main_id]->on_event(&e);
     printf("mouse click %f %f\n", x, y);
 //     NodeBorder* n = new NodeBorder();
 //     n->SetPositioning(YGPositionTypeAbsolute);
@@ -278,30 +280,31 @@ void App::mouse_down(int button, float x, float y)
 //     layout[main_id].update(width, height);
     if (popup)
     {
-        layout[main_id].remove_child(popup);
+        layout[main_id]->remove_child(popup);
         popup = nullptr;
     }
     if (button == 1)
     {
-        popup = (NodePopupMenu*)layout[const_hash("popup-menu")].m_children[0]->clone();
+        popup = (NodePopupMenu*)layout[const_hash("popup-menu")]->m_children[0]->clone();
         popup->SetPositioning(YGPositionTypeAbsolute);
         popup->SetPosition(x, y);
-        layout[main_id].add_child(popup);
+        layout[main_id]->add_child(popup);
     }
-    layout[main_id].update();
+    layout[main_id]->update();
 }
 void App::mouse_move(float x, float y)
 {
     MouseEvent e;
     e.m_type = kEventType::MouseMove;
     e.m_pos = { x, y };
-    layout[main_id].on_event(&e);
+    if (auto* main = layout[main_id])
+        main->on_event(&e);
 }
 void App::mouse_up(int button, float x, float y)
 {
     MouseEvent e;
     e.m_type = button ? kEventType::MouseUpR : kEventType::MouseUpL;
     e.m_pos = { x, y };
-    layout[main_id].on_event(&e);
-    layout[main_id].update();
+    layout[main_id]->on_event(&e);
+    layout[main_id]->update();
 }
diff --git a/engine/layout.cpp b/engine/layout.cpp
index 067ace0..3f41161 100644
--- a/engine/layout.cpp
+++ b/engine/layout.cpp
@@ -391,11 +391,18 @@ void Node::load_internal(const tinyxml2::XMLElement* x_node)
             n->load_internal(x_child);
             break;
         }
+        case kWidget::Viewport:
+        {
+            auto n = new NodeViewport();
+            add_child(n);
+            n->load_internal(x_child);
+            break;
+        }
         case kWidget::Ref:
         {
             auto ids = x_child->Attribute("id");
             auto id = const_hash(ids);
-            auto& ref = (*m_manager)[id].m_children[0];
+            auto& ref = (*m_manager)[id]->m_children[0];
             auto n = ref->clone();
             add_child(n);
             break;
diff --git a/engine/layout.h b/engine/layout.h
index ebc191c..a5122c0 100644
--- a/engine/layout.h
+++ b/engine/layout.h
@@ -49,6 +49,7 @@ enum class kWidget : uint16_t
     Button    = const_hash("button"),
     ButtonCustom = const_hash("button-custom"),
     PopupMenu = const_hash("popup-menu"),
+    Viewport  = const_hash("viewport"),
     Ref       = const_hash("ref"),
 };
 
@@ -104,7 +105,7 @@ public:
     std::function<void()> on_loaded;
     bool load(const char* path);
     bool reload();
-    class Node& operator[](uint16_t id) { return *m_layouts[id]; }
+    class Node* operator[](uint16_t id) { return m_layouts[id].get(); }
     //Node& operator[](const char* ids) { return m_layouts[const_hash(ids)]; }
 };
 
@@ -617,7 +618,7 @@ public:
         SetWidthP(100);
         SetHeightP(100);
         SetPositioning(YGPositionTypeAbsolute);
-        m_template = (*m_manager)[const_hash("message-box")].m_children[0]->clone();
+        m_template = (*m_manager)[const_hash("message-box")]->m_children[0]->clone();
         add_child(m_template);
         btnOk = m_template->find<NodeButton>("btn-ok");
         btnOk->on_click = [&] { destroy(); };
@@ -703,7 +704,7 @@ public:
         SetWidthP(100);
         SetHeightP(100);
         SetPositioning(YGPositionTypeAbsolute);
-        m_template = (*m_manager)[const_hash("settings")].m_children[0]->clone();
+        m_template = (*m_manager)[const_hash("settings")]->m_children[0]->clone();
         add_child(m_template);
         btnOk = m_template->find<NodeButton>("btn-ok");
         btnOk->on_click = [&] { destroy(); };
@@ -764,3 +765,55 @@ public:
         }
     }
 };
+
+class NodeViewport : public Node
+{
+public:
+    std::unique_ptr<Plane> m_faces;
+    std::unique_ptr<Sampler> m_sampler;
+    uint16_t m_tex_id;
+    
+    virtual void draw() override 
+    {
+        static float angle = 0;
+        angle += 0.05;
+        glm::mat4 cam = glm::lookAt(glm::vec3(sinf(angle)*10, 0, -10), glm::vec3(0, 0, 0), glm::vec3(0, -1, 0));
+        glm::mat4 proj = glm::perspective<float>(glm::radians(45.f), m_clip.z / m_clip.w, .1f, 100);
+
+        GLint vp[4];
+        GLfloat cc[4];
+        glGetIntegerv(GL_VIEWPORT, vp);
+        glGetFloatv(GL_COLOR_CLEAR_VALUE, cc);
+
+        glClearColor(1, 0, 0, 1);
+        glClear(GL_COLOR_BUFFER_BIT);
+        auto box = m_clip;
+        glViewport(box.x, (int)(vp[3] - box.y - box.w), box.z, box.w);
+        TextureManager::get(m_tex_id).bind();
+        m_sampler->bind(0);
+        glEnable(GL_BLEND);
+        ShaderManager::use(kShader::Texture);
+        ShaderManager::u_int(kShaderUniform::Tex, 0);
+        ShaderManager::u_mat4(kShaderUniform::MVP, proj * cam);
+        m_faces->draw_fill();
+        m_sampler->unbind();
+        TextureManager::get(m_tex_id).unbind();
+        glDisable(GL_BLEND);
+
+        glViewport(vp[0], vp[1], vp[2], vp[3]);
+        glClearColor(cc[0], cc[1], cc[2], cc[3]);
+    }
+    virtual Node* clone_instantiate() const override
+    {
+        return new NodeViewport;
+    }
+    virtual void create() override
+    {
+        m_faces = std::make_unique<Plane>();
+        m_faces->create<1>(10, 10);
+        m_sampler = std::make_unique<Sampler>();
+        m_sampler->create();
+        TextureManager::load("data/uvs.jpg");
+        m_tex_id = const_hash("data/uvs.jpg");
+    }
+};