diff --git a/Applied Visual Design/49_learn-how-bezier-curves-work.html b/Applied Visual Design/49_learn-how-bezier-curves-work.html
new file mode 100644
index 0000000..1650dca
--- /dev/null
+++ b/Applied Visual Design/49_learn-how-bezier-curves-work.html	
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lession 49</title>
+    <style>
+        .balls {
+            border-radius: 50%;
+            background: linear-gradient( 35deg, #ccffff, #ffcccc);
+            position: fixed;
+            width: 50px;
+            height: 50px;
+            margin-top: 50px;
+            animation-name: bounce;
+            animation-duration: 2s;
+            animation-iteration-count: infinite;
+        }
+        
+        #ball1 {
+            left: 27%;
+            animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
+        }
+        
+        #ball2 {
+            left: 56%;
+            animation-timing-function: ease-out;
+        }
+        
+        @keyframes bounce {
+            0% {
+                top: 0px;
+            }
+            100% {
+                top: 249px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="balls" id="ball1"></div>
+    <div class="balls" id="ball2"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Applied Visual Design/50_use-a-bezier-curve-to-move-a-graphic.html b/Applied Visual Design/50_use-a-bezier-curve-to-move-a-graphic.html
new file mode 100644
index 0000000..c2cbb00
--- /dev/null
+++ b/Applied Visual Design/50_use-a-bezier-curve-to-move-a-graphic.html	
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lession 50</title>
+    <style>
+        .balls {
+            border-radius: 50%;
+            position: fixed;
+            width: 50px;
+            height: 50px;
+            margin-top: 50px;
+            animation-name: bounce;
+            animation-duration: 2s;
+            animation-iteration-count: infinite;
+        }
+        
+        #red {
+            background: red;
+            left: 27%;
+            animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+        }
+        
+        #blue {
+            background: blue;
+            left: 56%;
+            animation-timing-function: ease-out;
+        }
+        
+        @keyframes bounce {
+            0% {
+                top: 0px;
+            }
+            100% {
+                top: 249px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="balls" id="red"></div>
+    <div class="balls" id="blue"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Applied Visual Design/51_make-motion-more-natural-using-a-bezier-curve.html b/Applied Visual Design/51_make-motion-more-natural-using-a-bezier-curve.html
new file mode 100644
index 0000000..4d39db6
--- /dev/null
+++ b/Applied Visual Design/51_make-motion-more-natural-using-a-bezier-curve.html	
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lession 51</title>
+    <style>
+        .balls {
+            border-radius: 50%;
+            position: fixed;
+            width: 50px;
+            height: 50px;
+            top: 60%;
+            animation-name: jump;
+            animation-duration: 2s;
+            animation-iteration-count: infinite;
+        }
+        
+        #red {
+            background: red;
+            left: 25%;
+            animation-timing-function: linear;
+        }
+        
+        #blue {
+            background: blue;
+            left: 50%;
+            animation-timing-function: ease-out;
+        }
+        
+        #green {
+            background: green;
+            left: 75%;
+            animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
+        }
+        
+        @keyframes jump {
+            50% {
+                top: 10%;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="balls" id="red"></div>
+    <div class="balls" id="blue"></div>
+    <div class="balls" id="green"></div>
+</body>
+
+</html>
\ No newline at end of file
