diff --git a/README.md b/README.md
index 222491f..320fe4d 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,49 @@
-# 圖片添加浮水印
+<a name="readme-top"></a>
 
+<div align="center">
+  <h1>圖片添加浮水印</h1>
+  <p>
+    圖片添加浮水印：選擇圖片，會加上檔名、檔案大小、圖片寬高資訊，並可下載添加浮水印後的圖檔
+  </p>
+  <p>
+    <a href="https://yuna9068.github.io/image-watermark/">Github Live Site URL</a>
+  </p>
+</div>
+
+![圖片添加浮水印](./website.webp)
+
+
+## Table of contents
+
+* [Features](#features)
+* [Screenshot](#screenshot)
+* [Built with](#built-with)
+* [Author](#author)
+
+
+## Features
 
-## 網頁主要功能及特色
 * 圖片添加浮水印資訊：檔名、檔案大小、圖片寬高
 
+<p align="right"><a href="#readme-top">⬆︎ BACK TO TOP</a></p>
+
+
+## Screenshot
+
+![圖片添加浮水印](./index.webp)
+
+<p align="right"><a href="#readme-top">⬆︎ BACK TO TOP</a></p>
+
+
+## Built with
 
-## 使用到的技術、工具
 * [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API "Canvas API - Web APIs | MDN")：HTML5 元素
+
+<p align="right"><a href="#readme-top">⬆︎ BACK TO TOP</a></p>
+
+
+## Author
+
+- GitHub - [Yuna](https://github.com/yuna9068)
+
+<p align="right"><a href="#readme-top">⬆︎ BACK TO TOP</a></p>
diff --git a/index.webp b/index.webp
new file mode 100644
index 0000000..bbb76c7
Binary files /dev/null and b/index.webp differ
diff --git a/website.webp b/website.webp
new file mode 100644
index 0000000..e60cf13
Binary files /dev/null and b/website.webp differ