diff --git a/GUI/Web Interface for Github/README.md b/GUI/Web Interface for Github/README.md
new file mode 100644
index 00000000..ee4d21ff
--- /dev/null
+++ b/GUI/Web Interface for Github/README.md	
@@ -0,0 +1,26 @@
+
+# Web Interface for Github
+
+
+![App Screenshot](https://www.thesoftwarereport.com/wp-content/uploads/2022/08/GitHub.png)
+
+## Features
+
+- Interactive GUI for github
+
+- Filtering the content based on programming language
+
+- Direct Download Facility
+- More Info of Particular File 
+
+
+
+
+
+## Screenshots
+
+![Screenshot 2022-10-24 170950](https://user-images.githubusercontent.com/56470462/197725723-214f84f2-aa58-4798-944e-0e7b11ec1682.jpg)
+
+![filter](https://user-images.githubusercontent.com/56470462/197725792-03fb52f6-b6c8-42f0-8963-0b5809947e80.jpg)
+
+![more](https://user-images.githubusercontent.com/56470462/197725847-c726f16d-f08c-4ee4-b6b6-89bdc970a55d.jpg)
diff --git a/GUI/Web Interface for Github/index.html b/GUI/Web Interface for Github/index.html
new file mode 100644
index 00000000..ce89eb6a
--- /dev/null
+++ b/GUI/Web Interface for Github/index.html	
@@ -0,0 +1,137 @@
+<!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">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
+    crossorigin="anonymous"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <title>Document</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@500;600;700&display=swap');
+
+    * {
+      font-family: "Poppins", sans-serif;
+    }
+
+    #formSelect {
+      width: 120px;
+      height: 30px;
+      color: white;
+      font-size: 12px;
+    }
+
+    .btn {
+      padding-top: 7px;
+      text-align: center;
+      width: 90px;
+      height: 30px;
+      font-size: 11px;
+    }
+
+    .fa {
+      margin-right: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <!-- Image and text -->
+  <nav class="navbar navbar-dark bg-dark mt-10"
+    style="display:flex;justify-content: flex-start; align-items: center;width: 80%;position: relative; bottom: 10px; left: 9%;">
+    <img src="https://avatars.githubusercontent.com/u/6811672?v=4" width="50" height="50" class="d-inline-block"
+      style="margin-left: 30px;" alt="">
+    <a class="navbar-brand" href="#" style="font-weight:900;margin-top: 20px;font-size: large;">
+
+      Github
+    </a>
+  </nav>
+  <div class="dropdown" style="position: relative; float: right; right: 11%;">
+    <select class="form-select bg-dark" aria-label="Default select example" id="formSelect">
+    </select>
+  </div>
+
+  <div>
+    <h1 class="display-4 my-4 text-center" style="font-weight: 500;">
+      All Project
+    </h1>
+  </div>
+  <div class="container" style="width: 100%;" id="card-lists">
+    <div class="row" id="panel">
+
+    </div>
+  </div>
+
+</body>
+<script>
+  var options = ["All"];
+  var request = new XMLHttpRequest();
+  request.open("GET", "https://api.github.com/users/larymak/repos", true);
+  request.onload = function () {
+    var data = JSON.parse(this.response);
+    let content = " ";
+    let content1 = " ";
+    data.forEach((p) => {
+
+      content += `
+           <div class="card" style="width: 350px; margin:10px" id="card">
+                <div class="card-body">
+                  <h5 class="card-title" style="font-size:18px">${p.name}</h5>
+                  <h6 class="card-subtitle mb-2 text-muted" style="font-size:15px;margin-top:5px">Id: ${p.id}</h6>
+                  <p class="card-text" style="font-size:12px;">Created: ${p.created_at}</p>
+                  <p class="card-text" style="font-size:12px;">Branch: ${p.default_branch}</p>
+                  <p class="card-text card-lang" style="font-size:12px;">Language: ${p.language}</p>
+                  <a href="https://api.github.com/repos/larymak/${p.name}/zipball/" class="btn btn-primary" ><i class="fa fa-download"></i>Download</a>
+                  <a href="morepage.html" class="btn btn-info"  style="float:right; display:flex;justify-content:center;align-items:center"><i class="fa fa-info" style="color:black; font-size:14px"></i>More Info</a>
+                </div>
+              </div> 
+ 
+  `
+      options.push(p.language)
+    });
+    fArr = options.filter((item,
+      index) => options.indexOf(item) === index);
+    fArr.forEach((arrVal) => {
+      content1 += `
+      <option value=${arrVal}>${arrVal}</option>
+    
+    `
+    })
+
+    document.querySelector("#panel").innerHTML = content;
+    document.querySelector("#formSelect").innerHTML = content1;
+  };
+
+  request.send();
+
+  $(document).ready(function () {
+    $("#formSelect").on('change', function () {
+      const input = $(this).val().toUpperCase();
+      const cardContainer = document.getElementById("card-lists");
+      const cards = cardContainer.getElementsByClassName("card");
+      for (let i = 0; i < card.length; i++) {
+        let title = card[i].querySelector(".card-body .card-lang");
+        if(input == "ALL" ){
+        location.reload();
+        }
+        else if (title.innerText.toUpperCase().indexOf(input) > -1 ) {
+          cards[i].style.display = "";
+        } else {
+          cards[i].style.display = "none";
+        }
+
+      }
+    });
+  })
+
+</script>
+
+</html>
\ No newline at end of file
diff --git a/GUI/Web Interface for Github/morepage.html b/GUI/Web Interface for Github/morepage.html
new file mode 100644
index 00000000..cd4f3491
--- /dev/null
+++ b/GUI/Web Interface for Github/morepage.html	
@@ -0,0 +1,227 @@
+<!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">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
+        crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <title>Document</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@500;600;700&display=swap');
+
+        * {
+            font-family: "Poppins", sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        .btn {
+            width: 90px;
+            height: 30px;
+            font-size: 11px;
+        }
+
+        .fa {
+            margin-right: 10px;
+        }
+
+
+        .card {
+            margin: 0;
+            padding: 0px;
+            position: relative;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+            transform-style: preserve-3d;
+            transform-origin: center right;
+            transition: transform 1s;
+            perspective: 600px;
+        }
+
+        .card__face {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            font-weight: bold;
+            font-size: 14px;
+            backface-visibility: hidden;
+            text-align: center;
+            border-radius: 10px;
+        }
+
+        .card__face--front {
+            width: 100%;
+            height: 100%;
+        }
+
+        .card__face--back {
+            transform: rotateY(180deg);
+        }
+
+        .card.is-flipped {
+            transform: translateX(-100%) rotateY(-180deg);
+        }
+
+        #card-ul {
+            display: flex;
+            list-style-type: upper-greek;
+            /* margin-top: 20px; */
+            flex-direction: column;
+            padding-top: 20px;
+            align-items: flex-start;
+            height: 80%;
+            margin-left: 20px;
+            font-size: 12px;
+        }
+
+        #span-text {
+            border-bottom: 2px solid #0275d8;
+            width: 200px;
+            margin-left: 30px;
+            padding-top: 5px;
+        }
+
+        .class-li {
+            padding: 3px;
+        }
+        .main-content-diff{
+            display: grid;
+            grid-template-columns: auto auto;
+            justify-content: space-evenly;
+            align-content: center;
+            margin-top: 20px;
+        }
+        #text-content {
+            padding-top: 7px;
+            font-size: 12px;
+            text-align: start;
+        }
+        #text-content-sha{
+            max-width: 180px;
+            font-size: 11px;
+            text-align: start;
+        }
+        
+    </style>
+</head>
+
+<body>
+    <nav class="navbar navbar-dark bg-dark mt-10"
+        style="display:flex;justify-content: flex-start; align-items: center;width: 80%;position: relative; bottom: 10px; left: 9%;">
+        <img src="https://avatars.githubusercontent.com/u/6811672?v=4" width="50" height="50" class="d-inline-block"
+            style="margin-left: 30px;" alt="">
+        <a class="navbar-brand" href="#" style="font-weight:900;margin-top: 20px;font-size: large;">
+
+            Github
+        </a>
+    </nav>
+
+
+    <div>
+        <h1 class="display-4 my-4 text-center" style="font-weight: 500;">
+        </h1>
+    </div>
+    <div class="container" style="width: 100%;" id="card-lists">
+        <div class="row" id="panel" style="width: 100%;">
+
+        </div>
+    </div>
+</body>
+
+<script>
+
+    const username = "******";
+    const password = "******"
+    const header = {
+        "Authorization": `Basic ${btoa(`${username}:${password}`)}`
+    }
+    let content = " ";
+    fetch("https://api.github.com/repos/larymak/Python-project-Scripts/contents", {
+        "method": "GET",
+        "headers": header
+    })
+        .then(response => response.json())
+        .then(jsonData => {
+            let data = jsonData
+            console.log(jsonData)
+            data.forEach((p) => {
+                content += `
+            <div class="card border-primary mb-3" style="max-width: 250px;margin:10px;height:200px">
+                <div class="card__face card__face--front">
+                    <div class="card-header" style="display:flex;justify-content:space-between">
+                        <text style="font-size:12px;"> ${p.name}</text>
+                         <button type="button" 
+                         class="btn btn-outline-primary" 
+                         onclick= "viewDetail('${p.name}')"
+                         id="ViewMore"
+                         style="width:50px;float:right;height:20px;display:flex;justify-content:center;align-items:center;">More</button>
+                    </div>
+
+                    <div class="main-content-diff">
+                            <text id="text-content">SHA: </text>
+                            <text id="text-content-sha">${p.sha}</text>
+                            <text id="text-content">Size: </text>
+                            <text id="text-content">${p.size}</text>
+                            <text id="text-content">Type: </text>
+                            <text id="text-content">${p.type}</text>
+                    </div>
+                </div>
+
+                    <div class="card__face card__face--back">
+                        <div id="span-text">
+                            <span>File Details</span> 
+                        </div>
+                        <div class="list-card">   
+                        <ul id="card-ul">
+
+                        </ul> 
+                        </div>                    
+                    </div>                   
+            </div>            
+`
+            });
+            document.querySelector("#panel").innerHTML = content;
+            var cards = document.querySelectorAll('.card');
+            [...cards].forEach((card, i) => {
+                card.addEventListener('click', function () {
+                    card.classList.toggle('is-flipped');
+                });
+
+            })
+        }).catch(err => {
+            console.log("Error: ", err);
+        })
+    function viewDetail(name) {
+        fetch("https://api.github.com/repos/larymak/Python-project-Scripts/contents/" + name)
+            .then(response => response.json())
+            .then(jsonData => {
+                let content1 = " ";
+                Array.from(jsonData, child => {
+
+                    jsonData.forEach(element => {
+                        content1 += `<li class="class-li">'${element.name}'</li>`
+
+                    });
+
+                    document.querySelector("#card-ul").innerHTML = content1;
+                });
+
+            });
+    }
+</script>
+
+
+
+
+</html>
\ No newline at end of file
