diff --git a/Existing_API_Collection/GiphyAPI/README.md b/Existing_API_Collection/GiphyAPI/README.md
new file mode 100644
index 0000000..798f8d9
--- /dev/null
+++ b/Existing_API_Collection/GiphyAPI/README.md
@@ -0,0 +1,21 @@
+GIPHY API:
+-This API allows developers to integrate Giphy's vast library of GIFs into their own applications, websites, and services.
+-Each GIF in the Giphy library comes with rich metadata, including titles, tags, source URLs, and user information.
+
+Future Scope:
+-Future iterations of the Giphy API may support more interactive GIFs that allow users to interact with elements within the GIF itself. 
+- Developers may have access to more detailed analytics and insights related to the usage of GIFs through the API.
+
+Implementation:
+-The JavaScript code contains an HTTP request to the GIPHY API's and authenticated api key, it fetches list of gifs from api and show it to users with downloading it functionality.
+
+Tech Stacks used:
+ - HTML (frontend)
+ - CSS (styling)
+ - Javascript (API Implementation)
+
+Output :
+![Output](image.png)
+
+Reference:
+https://developers.giphy.com/dashboard/
\ No newline at end of file
diff --git a/Existing_API_Collection/GiphyAPI/image.png b/Existing_API_Collection/GiphyAPI/image.png
new file mode 100644
index 0000000..bd0f701
Binary files /dev/null and b/Existing_API_Collection/GiphyAPI/image.png differ
diff --git a/Existing_API_Collection/GiphyAPI/index.html b/Existing_API_Collection/GiphyAPI/index.html
new file mode 100644
index 0000000..d0d455c
--- /dev/null
+++ b/Existing_API_Collection/GiphyAPI/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Giphy API Example</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>Giphy GIF Viewer</h1>
+        <div class="search-bar">
+            <input type="text" id="search-input" placeholder="Search for GIFs">
+            <button id="search-button">Search</button>
+        </div>
+    </header>
+    
+    <main>
+        <div id="gif-container">
+            <!-- GIFs will be displayed here -->
+        </div>
+    </main>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/GiphyAPI/script.js b/Existing_API_Collection/GiphyAPI/script.js
new file mode 100644
index 0000000..5c684bc
--- /dev/null
+++ b/Existing_API_Collection/GiphyAPI/script.js
@@ -0,0 +1,30 @@
+const apiKey = 'Ls5S6Pix3itW3ha6XFFmsksFS5k7SZZl'; 
+const searchInput = document.getElementById('search-input');
+const searchButton = document.getElementById('search-button');
+const gifContainer = document.getElementById('gif-container');
+
+searchButton.addEventListener('click', searchGIFs);
+
+function searchGIFs() {
+    const searchTerm = searchInput.value;
+    const apiUrl = `https://api.giphy.com/v1/gifs/search?q=${searchTerm}&api_key=${apiKey}&limit=10`;
+
+    //make api request
+    fetch(apiUrl)
+        .then(response => response.json())
+        .then(data => {
+            gifContainer.innerHTML = ''; // Clear previous GIFs
+            data.data.forEach(gif => {
+                const gifElement = document.createElement('div');
+                gifElement.className = 'gif-item';
+                gifElement.innerHTML = `
+                    <img class="gif-image" src="${gif.images.fixed_height.url}" alt="${gif.title}">
+                    <a class="download-button" href="${gif.images.original.url}" download="${gif.title}.gif">Download</a>
+                `;
+                gifContainer.appendChild(gifElement);
+            });
+        })
+        .catch(error => {
+            console.error('Error fetching GIFs:', error);
+        });
+}
diff --git a/Existing_API_Collection/GiphyAPI/style.css b/Existing_API_Collection/GiphyAPI/style.css
new file mode 100644
index 0000000..29e71a3
--- /dev/null
+++ b/Existing_API_Collection/GiphyAPI/style.css
@@ -0,0 +1,92 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: #f5f5f5;
+    margin: 0;
+    padding: 0;
+}
+
+header {
+    background-color: #333;
+    color: #fff;
+    padding: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    margin: 0;
+}
+
+.search-bar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+}
+
+input[type="text"] {
+    padding: 10px;
+    font-size: 16px;
+    border: none;
+    border-radius: 4px 0 0 4px;
+    width: 60%;
+}
+
+button {
+    padding: 10px 20px;
+    background-color: #555;
+    color: #fff;
+    border: none;
+    border-radius: 0 4px 4px 0;
+    cursor: pointer;
+    width: 20%;
+}
+
+button:hover {
+    background-color: #333;
+}
+
+main {
+    padding: 20px;
+}
+
+#gif-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.gif-item {
+    margin: 10px;
+    max-width: 250px;
+    text-align: center;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+    overflow: hidden;
+}
+
+.gif-item:hover {
+    transform: translateY(-5px);
+}
+
+.gif-image {
+    max-width: 100%;
+    height: auto;
+}
+
+.download-button {
+    display: block;
+    background-color: #333;
+    color: #fff;
+    padding: 10px 0;
+    text-decoration: none;
+    border-radius: 0 0 4px 4px;
+    cursor: pointer;
+}
+
+.download-button:hover {
+    background-color: #555;
+}
\ No newline at end of file
