diff --git a/week-7/drinks/index.html b/week-7/drinks/index.html
new file mode 100644
index 0000000..4996d31
--- /dev/null
+++ b/week-7/drinks/index.html
@@ -0,0 +1,27 @@
+<main id="vue-app">
+
+
+  
+    <input v-model="query" type="text" placeholder="Search">
+    <button @click="fetchDrinks" >Search</button>
+ 
+
+    <section v-if=drinks.length v-for="drink of drinks">
+    <div>
+        <img :src="drink.strDrinkThumb" alt="">
+        <h2><a :href="drink.strTags">{{drink.strTags}}</a></h2>
+    </div>
+    </section>
+    <p>
+
+    </p>
+
+
+
+</main>
+
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script src="js/drinks.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/week-7/drinks/js/drinks.js b/week-7/drinks/js/drinks.js
new file mode 100644
index 0000000..307f733
--- /dev/null
+++ b/week-7/drinks/js/drinks.js
@@ -0,0 +1,27 @@
+var app = new Vue({
+    el: '#vue-app',
+    data: {
+        drinks: [
+          
+        ],
+
+
+        query: ""
+        
+      },
+    methods: {
+        
+        fetchDrinks(){
+          fetch("https://www.thecocktaildb.com/api/json/v1/1/search.php?s=" + this.query)
+          .then(response =>{
+              response.json().then(data => {
+                  this.drinks = data.drinks;
+              });
+          }).catch(error => {
+              console.log(error);
+          });
+        }
+  
+    },
+
+  });
\ No newline at end of file
diff --git a/week-7/index.html b/week-7/index.html
new file mode 100644
index 0000000..c15a74d
--- /dev/null
+++ b/week-7/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Users</title>
+    <!-- <link rel="stylesheet" href="css/style.css"> -->
+    <style>
+
+        section{
+            display: flex;
+        }
+    </style>
+
+
+
+</head>
+
+<body>
+
+
+    <main id="vue-app">
+
+        <section v-if=users.length v-for="user of users">
+            <div>
+                <img :src="user.avatar" alt="">
+            </div>
+            <div>
+                <h2><a :href="'mailto:' + user.email">{{user.first_name}} {{user.last_name}}</a></h2>
+            </div>
+        </section>
+
+
+        <footer>
+
+            <button @click.prevent="increment">Next Page &gt;&gt;</button>
+        </footer>
+
+    </main>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script src="js/users.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/week-7/js/users.js b/week-7/js/users.js
new file mode 100644
index 0000000..ef57755
--- /dev/null
+++ b/week-7/js/users.js
@@ -0,0 +1,30 @@
+var app = new Vue({
+  el: '#vue-app',
+  data: {
+    users: [
+
+    ],
+    page: 1
+    
+  },
+  methods: {
+      increment(){
+          this.page = this.page+1;
+          this.fetchUsers();
+      },
+      fetchUsers(){
+        fetch('https://reqres.in/api/users?page=' + this.page)
+        .then(response =>{
+            response.json().then(data => {
+                this.users = data.data;
+            });
+        }).catch(error => {
+            console.log(error);
+        });
+      }
+
+  },
+  mounted(){
+    this.fetchUsers();
+  }
+});
\ No newline at end of file
