diff --git a/README.md b/README.md
index 11f544e..6eb56b6 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,88 @@
-# KittyPlayer
-Video player library for web pages with modern design in css and javaScript
+# KittyPlayer-lib
+KittyPlayer-lib is a library of components for creating modern and customizable video players.
+
+## Installation
+You can install KittyPlayer-lib via npm:
+
+```bash
+npm i kittyplayer
+```
+
+To use KittyPlayer-lib, first ensure you include the library in your project. Then, you can create a KittyPlayer instance and add it to your page:
+
+```html
+
+
+
+```
+
+These two files must always be imported so that the library works 100% and does not fail.
+
+# Components
+
+KittyPlayer-lib includes a variety of components for customizing and enhancing the video playback experience, such as customizable controls, play buttons, progress bars, and more:
+
+## Warning ⚠
+
+adding this is very important to be able to use the library
+
+```html
+
+
+
+
❚❚
+
+
+
+
00:00 / 00:00
+
+
+
+
+
+
+
+
+
+```
+
+# Video Player Components
+
+- `.video-container` (`div`) - Main container of the video player.
+ - `.video` (`video`) - Video element.
+ - `.seek-icon` (`div`) - Seek icon.
+ - `.pause-icon` (`div`) - Pause icon.
+ - `.controls` (`div`) - Player controls.
+ - `#playPause` (`button`) - Play/pause button.
+ - Play/pause icon (`i` with class `fas fa-play`).
+ - `#progress` (`input[type="range"]`) - Progress bar.
+ - `#time` (`div`) - Elapsed time/duration of the video.
+ - `#volumeContainer` (`div`) - Volume container.
+ - `#volume` (`input[type="range"]`) - Volume control.
+ - `#volumeIcon` (`div`) - Volume icon (`i` with class `fas fa-volume-up`).
+ - `#fullscreen` (`button`) - Fullscreen button (`i` with class `fas fa-expand`).
+
+## Images
+
+
+ Preview 1
+
+ ![Image 1](path_to_image_1)
+ ![Image 2](path_to_image_2)
+
+
+
+ Preview 2
+
+ ![Image 3](path_to_image_3)
+ ![Image 4](path_to_image_4)
+
+
+# Contribution
+
+Feel free to contribute to KittyPlayer-lib! You can submit suggestions, report bugs, or add new components through pull requests.
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
index 04af01d..036ac7c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "kittyplayer",
- "version": "0.0.1",
+ "version": "0.0.2",
"description": "📦 Browser video player library",
"main": "src/scripts/js/PlayVideo-Script.js",
"repository": {
diff --git a/src/components/video/playVideo.css b/src/components/video/playVideo.css
index e02f959..b9bd10d 100644
--- a/src/components/video/playVideo.css
+++ b/src/components/video/playVideo.css
@@ -121,4 +121,51 @@ body {
display: flex;
justify-content: center;
align-items: center;
-}
\ No newline at end of file
+}
+
+.seek-icon {
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 3em;
+ color: white;
+ background-color: rgba(0, 0, 0, 0.5);
+ padding: 10px 20px;
+ border-radius: 10px;
+ z-index: 1000;
+}
+
+@keyframes slideIn {
+ from {
+ transform: translateY(-100%);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideOut {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(-100%);
+ }
+}
+
+.alert {
+ position: fixed;
+ top: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 1rem 2rem;
+ background-color: #f56565;
+ color: #fff;
+ border-radius: 0.25rem;
+ animation: slideIn 0.5s forwards, slideOut 0.5s forwards 2.5s;
+ opacity: 0;
+ display: none;
+}
+
diff --git a/src/html/example.html b/src/html/example.html
index f54815e..a53860f 100644
--- a/src/html/example.html
+++ b/src/html/example.html
@@ -1,11 +1,12 @@
-
+
KittyPlayer
+
- `;
-
- videoInfo.style.top = `${event.clientY}px`;
- videoInfo.style.left = `${event.clientX}px`;
- videoInfo.classList.remove('hidden');
-}
-
-video.addEventListener('contextmenu', showVideoInfo);
-
-document.addEventListener('click', () => {
- videoInfo.classList.add('hidden');
-});
\ No newline at end of file
+}
\ No newline at end of file