diff --git a/include/Cubed/ui/credits_ui.hpp b/include/Cubed/ui/credits_ui.hpp
index ed9b7dc..9872c94 100644
--- a/include/Cubed/ui/credits_ui.hpp
+++ b/include/Cubed/ui/credits_ui.hpp
@@ -9,9 +9,11 @@ class CreditsUI : public UIManager {
 public:
     CreditsUI(CreditsScene& m_scene);
     void init() override;
+    void update_layout(int width, int height);
 
 private:
     bool handle_key_event(const KeyEvent& e) override;
+    bool handle_window_resize_event(const WindowResizeEvent& e) override;
     CreditsScene& m_scene;
 };
 } // namespace Cubed
\ No newline at end of file
diff --git a/include/Cubed/ui/scroll_view.hpp b/include/Cubed/ui/scroll_view.hpp
new file mode 100644
index 0000000..7d99b83
--- /dev/null
+++ b/include/Cubed/ui/scroll_view.hpp
@@ -0,0 +1,35 @@
+#pragma once
+
+#include "Cubed/ui/widget.hpp"
+namespace Cubed {
+class ColumnLayout;
+class ScrollView : public Widget {
+public:
+    ScrollView(const ScrollView&) = delete;
+    ScrollView(ScrollView&&) = delete;
+    ScrollView& operator=(const ScrollView&) = delete;
+    ScrollView& operator=(ScrollView&&) = delete;
+
+    ScrollView(Widget* parent);
+    ~ScrollView();
+
+    void render(Renderer& renderer) override;
+
+    float width() const override;
+    // visable height, you need notice offset
+    float height() const override;
+
+    ScrollView& set_child(std::unique_ptr<ColumnLayout> children);
+
+    bool handle_mouse_wheel_event(const MouseWheelEvent& e) override;
+    bool handle_mouse_move_event(const MouseMoveEvent& e) override;
+    Widget& set_fill_parent(bool fill) override;
+    Widget& set_fill_width(bool fill) override;
+    Widget& set_fill_height(bool fill) override;
+
+private:
+    ColumnLayout* m_child = nullptr;
+    bool m_hovered = false;
+    float m_scroll_speed = 50.0f;
+};
+} // namespace Cubed
\ No newline at end of file
diff --git a/include/Cubed/ui/widget.hpp b/include/Cubed/ui/widget.hpp
index 9b7928b..49f67b5 100644
--- a/include/Cubed/ui/widget.hpp
+++ b/include/Cubed/ui/widget.hpp
@@ -32,7 +32,9 @@ public:
     virtual void update(float dt);
     virtual void render(Renderer& renderer);
     virtual Widget& set_anchor(Anchor anchor);
-    virtual Widget& set_offset(glm::ivec2 offset);
+    virtual Widget& set_offset(glm::vec2 offset);
+    virtual Widget& add_offset(glm::vec2 offset);
+    virtual glm::vec2 get_offset() const;
     static void set_window_size(int width, int height);
     virtual Widget& set_visible(bool visible);
     // Returns the final display size
@@ -78,7 +80,7 @@ protected:
     bool m_fill_width = false;
     bool m_show_border = false;
     int m_border_size = 5;
-    glm::ivec2 m_offset{0, 0};
+    glm::vec2 m_offset{0, 0};
 
     std::vector<std::unique_ptr<Widget>>& children();
 
diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt
index 5ef935c..b1fdc73 100644
--- a/src/CMakeLists.txt
+++ b/src/CMakeLists.txt
@@ -108,4 +108,5 @@ target_sources(${PROJECT_NAME}
         gameplay/block_manager.cpp
         ui/screenshot_ui.cpp
         scene/screenshot_scene.cpp
+        ui/scroll_view.cpp
 )
\ No newline at end of file
diff --git a/src/ui/credits_ui.cpp b/src/ui/credits_ui.cpp
index 003c8cc..d2bdfb8 100644
--- a/src/ui/credits_ui.cpp
+++ b/src/ui/credits_ui.cpp
@@ -8,12 +8,19 @@
 #include "Cubed/ui/column_layout.hpp"
 #include "Cubed/ui/image.hpp"
 #include "Cubed/ui/rect.hpp"
+#include "Cubed/ui/scroll_view.hpp"
 
+#include <algorithm>
 namespace Cubed {
 CreditsUI::CreditsUI(CreditsScene& scene) : m_scene(scene) {}
 
 void CreditsUI::init() {
+    auto& renderer = m_scene.scene_manager().app().renderer();
+    update_layout(renderer.window_width(), renderer.window_height());
+}
 
+void CreditsUI::update_layout(int, int height) {
+    m_root_widget.reset();
     auto image = std::make_unique<Image>(nullptr);
     image
         ->set_image("texture/ui/background.png",
@@ -23,25 +30,38 @@ void CreditsUI::init() {
 
     auto& rect = image->add_child<Rect>();
     rect.set_color(Color::BLACK).set_alpha(0.7f).set_fill_parent(true);
+    auto& title = rect.add_child<Label>();
+    title.set_color(Color::WHITE)
+        .set_text(tr("menu.main.credits"))
+        .set_anchor(Anchor::TOP_CENTER)
+        .set_offset({0, 10});
+
+    auto& return_button = rect.add_child<Button>();
+    return_button.set_background_image(
+        "texture/ui/button001.png",
+        m_scene.scene_manager().app().texture_manager());
+
+    return_button.set_text(tr("button.return"));
+    return_button.set_anchor(Anchor::BOTTOM_CENTER).set_offset({0, -20});
+    return_button.set_clicked(
+        [this]() { m_scene.scene_manager().request_pop(); });
 
     {
-        auto& button = rect.add_child<Button>();
-        button.set_background_image(
-            "texture/ui/button001.png",
-            m_scene.scene_manager().app().texture_manager());
+        auto& scroll = rect.add_child<ScrollView>();
+        scroll.set_anchor(Anchor::TOP_CENTER)
+            .set_offset({0, 20 + title.height()});
 
-        button.set_text(tr("button.return"));
-        button.set_anchor(Anchor::BOTTOM_CENTER).set_offset({0, -20});
-        button.set_clicked([this]() { m_scene.scene_manager().request_pop(); });
-    }
-    {
-        auto& layout = rect.add_child<ColumnLayout>();
-        layout.set_spacing(20)
-            .set_anchor(Anchor::TOP_CENTER)
-            .set_offset({0, 20});
-        layout.add_child<Label>().set_text("Cubed");
-        auto add_text = [&](std::string_view view, float scale = 0.5f) {
-            layout.add_child<Label>().set_text(view).set_scale(scale);
+        float scroll_height = height - scroll.get_offset().y -
+                              return_button.height() +
+                              return_button.get_offset().y;
+
+        scroll.set_height(std::max(0.0f, scroll_height));
+
+        auto layout = std::make_unique<ColumnLayout>(&scroll);
+        layout->set_spacing(20).set_anchor(Anchor::TOP_CENTER);
+        layout->add_child<Label>().set_text("Cubed");
+        auto add_text = [&](std::string_view view, float scale = 0.8f) {
+            layout->add_child<Label>().set_text(view).set_scale(scale);
         };
         add_text("A cube game like Minecraft, using C++ and OpenGL.");
         add_text("Author: zhenyan121");
@@ -73,6 +93,8 @@ void CreditsUI::init() {
         add_text("SkyOnPole");
         add_text("free_w_cloud");
         add_text("Last but not least, thanks to you");
+
+        scroll.set_child(std::move(layout));
     }
 
     m_root_widget = std::move(image);
@@ -86,4 +108,9 @@ bool CreditsUI::handle_key_event(const KeyEvent& e) {
     return UIManager::handle_key_event(e);
 }
 
+bool CreditsUI::handle_window_resize_event(const WindowResizeEvent& e) {
+    update_layout(e.width, e.height);
+    return UIManager::handle_window_resize_event(e);
+}
+
 } // namespace Cubed
\ No newline at end of file
diff --git a/src/ui/screenshot_ui.cpp b/src/ui/screenshot_ui.cpp
index b4c6eeb..8b166ef 100644
--- a/src/ui/screenshot_ui.cpp
+++ b/src/ui/screenshot_ui.cpp
@@ -7,6 +7,7 @@
 #include "Cubed/ui/button.hpp"
 #include "Cubed/ui/column_layout.hpp"
 #include "Cubed/ui/row_layout.hpp"
+#include "Cubed/ui/scroll_view.hpp"
 
 #include <algorithm>
 #include <array>
@@ -42,10 +43,19 @@ void ScreenshotUI::update_layout(int width, int height) {
         int height = 0;
     };
 
+    auto& return_button = bg->add_child<Button>();
+    return_button.set_default_image(texture_manager);
+    return_button.set_anchor(Anchor::BOTTOM_CENTER);
+    return_button.set_offset({0, -30});
+    return_button.set_text(tr("button.return"));
+    return_button.set_clicked(
+        [this]() { m_scene.scene_manager().request_pop(); });
+
     fs::path path = Renderer::SCREENSHOT_PATH;
 
     std::vector<ImageInfo> image_infos;
     constexpr float IMAGE_SCALE = 0.25;
+
     if (fs::exists(path)) {
         for (auto& entry : fs::recursive_directory_iterator(path)) {
             if (!fs::is_regular_file(entry)) {
@@ -66,18 +76,26 @@ void ScreenshotUI::update_layout(int width, int height) {
         constexpr int SPACING = 10;
 
         const int WIDGET_WIDTH = std::min(width, width - 2 * PADDING);
-        // const int WIDGET_HEIGHT = std::max(height, height - 2 * PADDING);
 
         float cur_width = 0.0f;
-        // float cur_height = 0.0f;
-        auto& root_column = bg->add_child<ColumnLayout>();
-        root_column.set_child_anchor(ColumnLayoutAnchor::LEFT)
-            .set_spacing(10)
-            .set_anchor(Anchor::TOP_CENTER)
+
+        auto& scroll = bg->add_child<ScrollView>();
+
+        scroll.set_anchor(Anchor::TOP_CENTER)
             .set_offset({0, 10 + title.height()});
+
+        float scroll_height = height - scroll.get_offset().y +
+                              return_button.get_offset().y -
+                              return_button.height();
+
+        scroll.set_height(std::max(0.0f, scroll_height));
+        auto root_column = std::make_unique<ColumnLayout>(&scroll);
+        root_column->set_child_anchor(ColumnLayoutAnchor::LEFT)
+            .set_spacing(10)
+            .set_anchor(Anchor::TOP_CENTER);
         RowLayout* row = nullptr;
         auto create_row = [&row, &root_column]() {
-            row = &root_column.add_child<RowLayout>();
+            row = &root_column->add_child<RowLayout>();
             row->set_anchor(Anchor::TOP_LEFT);
             row->set_spacing(SPACING);
         };
@@ -95,6 +113,7 @@ void ScreenshotUI::update_layout(int width, int height) {
             auto& im = row->add_child<Image>();
             im.set_texture(image.texture, true).set_scale(IMAGE_SCALE);
         }
+        scroll.set_child(std::move(root_column));
     }
     if (!fs::exists(path) || image_infos.empty()) {
         auto& label = bg->add_child<Label>();
@@ -103,15 +122,6 @@ void ScreenshotUI::update_layout(int width, int height) {
             .set_anchor(Anchor::CENTER);
     }
 
-    {
-        auto& button = bg->add_child<Button>();
-        button.set_default_image(texture_manager);
-        button.set_anchor(Anchor::BOTTOM_CENTER);
-        button.set_offset({0, -50});
-        button.set_text(tr("button.return"));
-        button.set_clicked([this]() { m_scene.scene_manager().request_pop(); });
-    }
-
     m_root_widget = std::move(bg);
 }
 
diff --git a/src/ui/scroll_view.cpp b/src/ui/scroll_view.cpp
new file mode 100644
index 0000000..6335c9f
--- /dev/null
+++ b/src/ui/scroll_view.cpp
@@ -0,0 +1,112 @@
+#include "Cubed/ui/scroll_view.hpp"
+
+#include "Cubed/render/renderer.hpp"
+#include "Cubed/tools/log.hpp"
+#include "Cubed/ui/column_layout.hpp"
+
+#include <algorithm>
+#include <glad/glad.h>
+namespace Cubed {
+ScrollView::ScrollView(Widget* parent) : Widget(parent) {}
+ScrollView::~ScrollView() {}
+
+void ScrollView::render(Renderer& renderer) {
+    if (!m_visible)
+        return;
+    auto p = pos();
+    float h = height();
+    float w = width();
+
+    // convert window coords to framebuffer coords for scissor.
+    float sx = renderer.window_width() > 0
+                   ? renderer.frame_width() / renderer.window_width()
+                   : 1.0f;
+    float sy = renderer.window_height() > 0
+                   ? renderer.frame_height() / renderer.window_height()
+                   : 1.0f;
+
+    GLint scissor_x = static_cast<GLint>(p.x * sx);
+    GLint scissor_y = static_cast<GLint>((m_window_height - p.y - h) * sy);
+    GLsizei scissor_w = static_cast<GLsizei>(std::max(0.0f, w * sx));
+    GLsizei scissor_h = static_cast<GLsizei>(std::max(0.0f, h * sy));
+
+    glEnable(GL_SCISSOR_TEST);
+    glScissor(scissor_x, scissor_y, scissor_w, scissor_h);
+
+    Widget::render(renderer);
+
+    glDisable(GL_SCISSOR_TEST);
+}
+
+float ScrollView::width() const {
+    if (Widget::width() > 0) {
+        return Widget::width();
+    }
+    if (m_child) {
+        return m_child->width();
+    }
+    return 0.0f;
+}
+
+float ScrollView::height() const {
+    if (Widget::height() > 0) {
+        return Widget::height();
+    }
+    Logger::warn("You should set Scroll view height!");
+    if (m_parent) {
+        return m_parent->height();
+    }
+    return m_window_height;
+}
+
+ScrollView& ScrollView::set_child(std::unique_ptr<ColumnLayout> children) {
+    Widget::children().clear();
+    m_child = children.get();
+    Widget::children().emplace_back(std::move(children));
+    m_child->set_offset({0, 0});
+    m_child->set_fill_height(false);
+    m_child->set_fill_parent(false);
+    m_child->set_fill_width(false);
+    return *this;
+}
+
+bool ScrollView::handle_mouse_move_event(const MouseMoveEvent& e) {
+    if (Widget::handle_mouse_move_event(e)) {
+        return true;
+    }
+    auto p = pos();
+    if (e.xpos >= p.x && e.xpos <= p.x + width() && e.ypos >= p.y &&
+        e.ypos <= p.y + height()) {
+        m_hovered = true;
+        return true;
+    }
+    m_hovered = false;
+    return false;
+}
+
+bool ScrollView::handle_mouse_wheel_event(const MouseWheelEvent& e) {
+    if (m_hovered && m_child) {
+        float c_height = m_child->height();
+        float offset = m_child->get_offset().y;
+        float viewport = height();
+        float max_offset = std::max(0.0f, c_height - viewport);
+        float new_offset =
+            std::clamp(offset + e.offset * m_scroll_speed, -max_offset, 0.0f);
+        m_child->set_offset({0, new_offset});
+        return true;
+    }
+    return Widget::handle_mouse_wheel_event(e);
+}
+Widget& ScrollView::set_fill_parent(bool) {
+    Logger::warn("You should not use this function in scroll view!");
+    return *this;
+}
+Widget& ScrollView::set_fill_width(bool) {
+    Logger::warn("You should not use this function in scroll view!");
+    return *this;
+}
+Widget& ScrollView::set_fill_height(bool) {
+    Logger::warn("You should not use this function in scroll view!");
+    return *this;
+}
+} // namespace Cubed
diff --git a/src/ui/widget.cpp b/src/ui/widget.cpp
index 85caab6..62cacfb 100644
--- a/src/ui/widget.cpp
+++ b/src/ui/widget.cpp
@@ -158,10 +158,16 @@ Widget& Widget::set_anchor(Anchor anchor) {
     m_anchor = anchor;
     return *this;
 }
-Widget& Widget::set_offset(glm::ivec2 offset) {
+Widget& Widget::set_offset(glm::vec2 offset) {
     m_offset = offset;
     return *this;
 }
+Widget& Widget::add_offset(glm::vec2 offset) {
+    m_offset += offset;
+    return *this;
+}
+glm::vec2 Widget::get_offset() const { return m_offset; }
+
 void Widget::set_window_size(int width, int height) {
     m_window_height = height;
     m_window_width = width;