+
+## 2. 组件列表
+目前支持***30***种组件，后续会添加更多。
+| 名称 | 介绍 | 展示图片|
+|:----:|:----:|:----:|
+| RibbonWindow | 基于framelesshelper实现的无边框窗口，支持退出确认弹窗及模糊/亚克力化背景。||
+| RibbonTabBar | 支持多分组页面切换、自定义右上角工具栏、自由收放的工具栏，如同Word的。|  |
+| RibbonTitleBar | 支持自定义背景色、自由添加工具按钮的窗口标题栏，针对Windows和macOS有不同的窗口按钮设计。|  |
+| RibbonBottomBar | 支持添加自定义工具的底栏。 | |
+
+其他组件的介绍会陆续更新。
+
+## 3. 支持平台
+目前是基于Qt 6 设计的，之后有时间会加入Qt 5的支持, ***因此目前仅支持Qt 6支持的平台***。
+### Qt 6 分支 (main 分支)
++ Windows: Windows 10 (1809+), Windows 11.(X86/AMD64, aarch64)
++ macOS: macOS 11+.(AMD64, aarch64)
++ Linux: Ubuntu 22.04+ (X86/AMD64)
+### Qt 5 分支 (***TODO***)
++ Windows: Windows 7+.(X86/AMD64)
++ macOS: MacOS X 10.13 - 10.15, macOS 11+.(AMD64, aarch64)
++ Linux: Ubuntu 18.04+ (X86/AMD64)
+
+## 4. 鸣谢
++ 感谢[@wangwenx190](https://github.com/wangwenx190)的[framelesshelper](https://github.com/wangwenx190/framelesshelper)让RibbonWindow能实现无边框。
++ [@Microsoft](https://github.com/microsoft)的[fluentui-system-icons](https://github.com/zhuzichu520/FluentUI)提供的漂亮图标库.
++ 感谢[@zhuzichu520](https://github.com/zhuzichu520)的[FluentUI](https://github.com/zhuzichu520/FluentUI) 为我提供的灵感和参考。
+
+## 5. 与我联系
++ Email: mentalflow@ourdocs.cn
++ Blog: [菜鸟技术猿的折腾史.](https://blog.ourdocs.cn)
++ ***欢迎发起PR或Issues，我会在空余时间尽快完善功能或修复bug，希望能一起让RibbonUI变得更好，尽情享受吧🎉！***
\ No newline at end of file
diff --git a/README.md b/README.md
index a6e8b76..66602e4 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,68 @@
# RibbonUI
-A library of controls written in QML and designed with reference to the Microsoft Ribbon style.
+
+
+
+
+
Qt RibbonUI
+
+- [RibbonUI](#ribbonui)
+ - [1. Introduction](#1-introduction)
+ - [2. Included Components](#2-included-components)
+ - [3. Supported platforms](#3-supported-platforms)
+ - [Qt 6 branch (main branch)](#qt-6-branch-main-branch)
+ - [Qt 5 branch (***TODO***)](#qt-5-branch-todo)
+ - [4. Acknowledgement](#4-acknowledgement)
+ - [5. Get in touch with me](#5-get-in-touch-with-me)
+
+
+## 1. Introduction
+RibbonUI is a lightweight, minimalist and elegant Qt component library written in QML and designed with reference to the Microsoft Ribbon style.
+
+***[点击查看中文文档](README(zh-cn).md)***
+
+
+
+
+
+
+
Home Light/Dark Theme (Classic Style)
+
+
+
+
+
+
+
Home Light/Dark Theme (Modern Style)
+
+
+## 2. Included Components
+Currently supports ***30*** components, more will be added later.
+| Components | Introduction | Demo Picture|
+|:----:|:----:|:----:|
+| RibbonWindow | A Window component that relies on framelesshelper to support exit confirmation popups and blur style backgrounds. ||
+| RibbonTabBar | A toolbar with support for page switching and retracting, and support for placing customized buttons in the upper right corner, just like Microsoft Word's. |  |
+| RibbonTitleBar | A window title bar that supports custom colors and the free addition of secondary buttons, with different designs for Windows and macOS. |  |
+| RibbonBottomBar | A bottom bar that supports adding custom tools. | |
+
+***The introduction of other components will be updated later.***
+
+## 3. Supported platforms
+The current design is based on Qt 6, and support for Qt 5 will be added sometime later, ***so the current support list is consistent with Qt 6***.
+### Qt 6 branch (main branch)
++ Windows: Windows 10 (1809+), Windows 11.(X86/AMD64, aarch64)
++ macOS: macOS 11+.(AMD64, aarch64)
++ Linux: Ubuntu 22.04+ (X86/AMD64)
+### Qt 5 branch (***TODO***)
++ Windows: Windows 7+.(X86/AMD64)
++ macOS: MacOS X 10.13 - 10.15, macOS 11+.(AMD64, aarch64)
++ Linux: Ubuntu 18.04+ (X86/AMD64)
+
+## 4. Acknowledgement
++ [@wangwenx190](https://github.com/wangwenx190)'s [framelesshelper](https://github.com/wangwenx190/framelesshelper) for frameless window (aka RibbonWindow's base).
++ [@Microsoft](https://github.com/microsoft)'s [fluentui-system-icons](https://github.com/zhuzichu520/FluentUI) for beautifully designed icons.
++ [@zhuzichu520](https://github.com/zhuzichu520)'s [FluentUI](https://github.com/zhuzichu520/FluentUI) for inspiration and reference.
+
+## 5. Get in touch with me
++ Email: mentalflow@ourdocs.cn
++ Blog: [The Tossed History of a Rookie Technician.](https://blog.ourdocs.cn)
++ ***And PRs and Issues are welcome, I'll try to improve features or fix bugs as soon as I can in my spare time, let's make RibbonUI better together, enjoy!***
\ No newline at end of file
diff --git a/documents/pictures/RibbonBottomBar.png b/documents/pictures/RibbonBottomBar.png
new file mode 100644
index 0000000..57b60c5
Binary files /dev/null and b/documents/pictures/RibbonBottomBar.png differ
diff --git a/documents/pictures/RibbonTabBar.png b/documents/pictures/RibbonTabBar.png
new file mode 100644
index 0000000..a84a536
Binary files /dev/null and b/documents/pictures/RibbonTabBar.png differ
diff --git a/documents/pictures/RibbonTitleBar.png b/documents/pictures/RibbonTitleBar.png
new file mode 100644
index 0000000..eef25d6
Binary files /dev/null and b/documents/pictures/RibbonTitleBar.png differ
diff --git a/documents/pictures/home-dark-classic.png b/documents/pictures/home-dark-classic.png
new file mode 100644
index 0000000..3aed2af
Binary files /dev/null and b/documents/pictures/home-dark-classic.png differ
diff --git a/documents/pictures/home-dark-modern.png b/documents/pictures/home-dark-modern.png
new file mode 100644
index 0000000..d004086
Binary files /dev/null and b/documents/pictures/home-dark-modern.png differ
diff --git a/documents/pictures/home-light-classic.png b/documents/pictures/home-light-classic.png
new file mode 100644
index 0000000..868e439
Binary files /dev/null and b/documents/pictures/home-light-classic.png differ
diff --git a/documents/pictures/home-light-modern.png b/documents/pictures/home-light-modern.png
new file mode 100644
index 0000000..576049e
Binary files /dev/null and b/documents/pictures/home-light-modern.png differ
+
+ 
+ 
+ 
+