diff --git a/Example/Media/addPagerSettings.gif b/Example/Media/addPagerSettings.gif
new file mode 100644
index 0000000..84e59ef
Binary files /dev/null and b/Example/Media/addPagerSettings.gif differ
diff --git a/Example/Media/defaultExample.gif b/Example/Media/defaultExample.gif
new file mode 100644
index 0000000..43b332d
Binary files /dev/null and b/Example/Media/defaultExample.gif differ
diff --git a/Example/Media/setStateCallback.gif b/Example/Media/setStateCallback.gif
new file mode 100644
index 0000000..1b07d39
Binary files /dev/null and b/Example/Media/setStateCallback.gif differ
diff --git a/README.md b/README.md
index 9a50592..aed8b4a 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,11 @@ struct PagerView: View {
 }
 ```
 
+
+<div style="text-align:center">
+    <img src="Example/Media/defaultExample.gif">
+</div>
+
 You can specify the index of the initial page shown in the `XLPagerView` initializer and different settings through the PagerSettings.
 
 ### Pager Settings
@@ -103,7 +108,7 @@ import PagerTabStrip
 
 struct PagerView: View {
 
-	let pagerSettings = PagerSettings(tabItemSpacing: 0, tabItemHeight: 50, indicatorBarHeight: 2, indicatorBarColor: Color.blue)
+	let pagerSettings = PagerSettings(tabItemSpacing: 0, tabItemHeight: 50, indicatorBarHeight: 2, indicatorBarColor: Color.gray)
 
 	var body: some View {
 		XLPagerView(selection: 1, pagerSettings: pagerSettings) {
@@ -125,6 +130,10 @@ struct PagerView: View {
 	}
 }
 ```
+In this example, we add some settings like the tab bar height, indicator bar color and indicator bar height. Let's watch how it looks!
+<div style="text-align:center">
+    <img src="Example/Media/addPagerSettings.gif">
+</div>
 
 ## Navigation bar
 
@@ -139,7 +148,7 @@ struct TitleNavBarItem: View {
     var body: some View {
         VStack {
             Text(title)
-                .foregroundColor(Color.blue)
+                .foregroundColor(Color.gray)
                 .font(.subheadline)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
@@ -152,8 +161,6 @@ struct TitleNavBarItem: View {
 
 You can define the style of your nav items when they are selected or highlighted by implementing `PagerTabViewDelegate` protocol in your nav item view. 
 
-
-
 In this example we are going to change the text and background color when the tab is highlighted and selected.
 
 ```swift
@@ -191,6 +198,10 @@ struct TitleNavBarItem: View, PagerTabViewDelegate {
 }
 ```
 
+<div style="text-align:center">
+    <img src="Example/Media/setStateCallback.gif">
+</div>
+
 ## onPageAppear modifier
 
 You can use this callback if you want to trigger some action when the user switches to this page, either by scrolling to it or tapping its tab. This modifier is applied to a specific page.