diff --git a/app/main.py b/app/main.py
index f3343f2..5d30c62 100644
--- a/app/main.py
+++ b/app/main.py
@@ -12,7 +12,7 @@ app = FastAPI()
 app.mount("/data", StaticFiles(directory="/data"), name="data")
 
 
-templates = Jinja2Templates(directory="templates")
+templates = Jinja2Templates(directory="app/templates")
 loop = asyncio.get_running_loop()
 
 # JSON cache
@@ -74,7 +74,7 @@ async def ydl(url: str, location: str):
         return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
 
 
-@app.get("/", response_class=HTMLResponse)
+@app.get("/", include_in_schema=False, response_class=HTMLResponse)
 async def index(request: Request):
     global cached_data
     try:
@@ -98,4 +98,11 @@ async def index(request: Request, show = str):
         except Exception as e:
             return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
     except Exception as e:
-        return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
\ No newline at end of file
+        return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
+    
+@app.get("/ydl", include_in_schema=False)
+async def webpage(request: Request):
+    try:
+        return templates.TemplateResponse("ydl.html", {"request": request})
+    except Exception as e:
+        return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
diff --git a/app/static/css/style.css b/app/static/css/style.css
new file mode 100644
index 0000000..352d245
--- /dev/null
+++ b/app/static/css/style.css
@@ -0,0 +1,350 @@
+:root {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 17px;
+    background-color: #292F36;
+    color: #ccc;
+}
+nav {
+    width: 100%;
+    text-align: left;
+    position: fixed;
+    z-index: 5;
+    top: 0;
+    left: 0;
+    text-decoration: unset;
+    background-color: #1b1f24;
+    & ul {
+        padding-inline-start: unset;
+        display: flex;
+        align-items: center; 
+        margin-block-start: .4em;
+        margin-block-end: .4em;
+        & li {
+            text-align: left;
+            display: inline-block;
+            font-size: 1.5em;
+            & hover {
+                cursor: pointer;;
+            }
+            & a {
+                display: block;
+                text-decoration: none; /* no underline */
+                color: #ccc;
+                padding: .4em .75em .4em .75em;
+            }
+            & a:hover {
+                color: #f0f0f0;
+            }
+            & i {
+                padding-top: .1em;
+            }
+            & .bx-search {
+                text-align: right;
+            }
+        }
+        & b {
+            display: unset;
+            position: absolute;
+            right: 1em;
+            padding: .75em .2em;
+            z-index: 5;
+        }
+    }
+    & form {
+        all: unset;
+        display: inline-block;
+        border: solid 2px #ccc;
+        border-radius: 2em;
+        padding: .15em 1em;
+        top: 0;
+        & input {
+            display: block;
+            all: unset;
+        }
+        & button {
+            all: unset;
+            top: 5em;
+            cursor: pointer;
+            & a {
+                font-size: 1.5em;
+                display: block;
+                position: relative;
+                bottom: -5;
+            }
+        }
+    }
+    #dropSearch {
+        color: #ccc;
+        & form {
+            all: unset;
+            text-align: left;
+            text-indent: 1em;
+            & input {
+                z-index: 6;
+                float: left;
+                height: 2.4em;
+                font-size: 1.2em;
+                background-color: #1b1f24;
+            }
+        }
+        
+    }
+}
+#searchFilters {
+    margin-bottom: 1em;
+    /* display:none; */
+    & .selects-container {
+        display: inline-block;
+        background-color: #1b1f24;
+        margin: 0.2em;
+        text-align: left;
+        border-radius: .25em;
+        cursor: pointer;
+        position: relative;
+    }
+    & select {
+        left:0;
+        top:0;
+        all: unset;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        background-color: #1b1f24;
+        width: 11ch;
+        padding: 0.5em;
+        border-radius: inherit;
+    }
+    & a {
+        padding: 0.5em;
+        background-color: #2163a1;
+        border-radius: inherit;
+        cursor: pointer;
+    }
+    & a:hover{
+        color: #f0f0f0;
+    }
+    & i {
+        right: 0.4em;
+        top: 0.65em;
+        position: relative;
+        float: right;
+    }
+}
+#searchButton{
+    display: none;
+}
+#searchButton:hover {
+    cursor: pointer;
+}
+#glass {
+    position: fixed;
+    pointer-events: unset;
+    height: 100%;
+    width: 100%;
+    z-index: 4;
+    backdrop-filter: blur(10px);
+    left:0;
+    top: 0;
+}
+/* .background-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('background.jpg');
+    background-size: cover;
+    filter: blur(10px);
+    z-index: -1;
+    opacity: 50%;
+  } */
+body {
+    text-align: center;
+    margin-top: 5em;
+}
+@media (min-width: 1171px) {
+    .downloader{
+        
+        height: 50px;
+    }
+}
+@media (max-width: 1170px) {
+    :root {
+        font-size: 40px;
+    }
+    .movie {
+        margin: 75em;
+    }
+    #desktopSearch {
+        display: none;
+    }
+    #searchButton {
+        display: block;
+    }
+    #searchFilters {
+        font-size: 1.2em;
+    }
+    #redirect{
+        width: 300;
+        height: 300;
+    }
+    nav {
+        text-align: right;
+        & ul {
+            display: block;
+            & b {
+                left: 1em;
+                right: unset;
+            }
+        }
+        & li {
+            border-radius: .5em;
+            margin-right: .25em;
+            background-color: rgba(255, 255, 255, 0.10);
+            box-shadow: -6px 8px 10px rgba(81,41,10,0.1),0px 2px 2px rgba(81,41,10,0.2);
+        }
+    }
+    .pageButton {
+        margin-bottom: 3em;
+        font-size: 1.1em;
+    }
+    .downloader{
+        height: 125px;
+        width: 700px;
+    }
+}
+.description {
+    width: 10em;
+    height: 3em;
+    overflow: hidden;
+    & h4 {
+        margin-block-start: .1em;
+        margin-block-end: .1em;
+        display: -webkit-box;
+        -webkit-line-clamp: 2; /* Number of visible lines */
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+.resDownload {
+    bottom: 0;
+    display: unset;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none;
+    & .resolution {
+        font-weight: bold;
+        color: white;
+        text-decoration: unset;
+        display: inline-block;
+        padding: .25em 1em .5em 1em;
+        border-radius: .5em;
+        vertical-align: bottom;
+    }
+    & .resError {
+        background-color: red;
+    }
+}
+.resolution_exists {
+    background-color: #525252;
+    cursor: not-allowed;
+}
+.resolution_available {
+    background-color: #2163a1;
+    cursor: pointer;
+    & .resolution_available:active {
+        background-color: #184875;
+    }
+}
+.details {
+    position: absolute;
+    margin: .25em;
+    margin-top: unset;
+    z-index: 3;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none;
+    & .chip {
+        background-color: rgba(0, 0, 0, 0.45);
+        border-radius: .5em;
+        font-size: .75em;
+        padding: .075em .3em;
+        display: inline-block;
+        backdrop-filter: blur(10px);
+        color: #ccc;
+    }
+    & .rating {
+        color: #fcba03;
+    }
+}
+
+.movie {
+    margin: .25em;
+    margin-bottom: 1em;
+    padding: .5em;
+    display: inline-block;
+    border-radius: .75em;
+    width: 10em;
+    color: whitesmoke;
+    background-color: rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(10px);
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.45);
+}
+
+.movie img {
+    border-radius: .45em;
+    width: 10em;
+    height: auto;
+    position: relative;
+    z-index: 2;
+}
+#search {
+    height: 2em;
+}
+.pageButton {
+    margin: auto;
+    margin-bottom: 2em;
+    margin-top: 1em;
+    width: fit-content;
+    border-radius: 2em;
+    padding: .5em 0em;
+    background-color: rgba(255, 255, 255, 0.10);
+    & a {
+        padding: .5em 1em;
+    }
+    & a:hover {
+        background-color: #ccc;
+        cursor: pointer;
+        color: #292F36;
+    }
+    & #leftArrow {
+        border-radius: 2em 0 0 2em;
+    }
+    & #rightArrow {
+        border-radius: 0 2em 2em 0;
+    }
+}
+.disabled-button {
+    color: rgb(116, 116, 116);
+    pointer-events: none;
+  }
+.activePage {
+    text-decoration: underline;
+}
+.downloader {
+    font-size: 1.25em;
+    padding: 0.5em;
+    border-radius: 0.5em;
+    margin-bottom: 20px;
+}
+#redirect{
+    border-radius: 40px;
+    margin: 50px;
+}
\ No newline at end of file
diff --git a/app/static/javascript/general.js b/app/static/javascript/general.js
new file mode 100644
index 0000000..3534c8e
--- /dev/null
+++ b/app/static/javascript/general.js
@@ -0,0 +1,57 @@
+// function showPopup(movie_name) {
+//     var alert = "Sending download request for " + movie_name + "\n\n" + "Press OK to continue."
+//     window.alert(alert);
+// }
+
+document.addEventListener("DOMContentLoaded", function() {
+    var inputField = document.getElementById("searchDropdown");
+    var searchButton = document.getElementById("searchButton");
+    var matches = document.getElementById("matches");
+    var dropSearch = document.getElementById("dropSearch");
+
+    // window.addEventListener('scroll', () => {
+    //     dropSearch.style.display = 'none';
+    // });
+
+    // Add a click event listener to the element
+    searchButton.addEventListener("click", function() {
+        // Toggle the 'display' style property
+        if (dropSearch.style.display === "none") {
+            dropSearch.style.display = "unset";
+            matches.style.display = "none";
+        } else {
+            dropSearch.style.display = "none";
+            matches.style.display = "unset";
+        }
+    });
+
+    searchButton.addEventListener("click", function() {
+        inputField.focus(); // Activate the input field
+        });
+});
+
+    $(document).ready(function () {
+        $('.download-link').click(function (event) {
+            event.preventDefault(); // Prevent the default link behavior
+
+            var url = $(this).data('url');
+            var filename = $(this).data('filename');
+            var clickedLink = $(this);
+
+            // Use AJAX to download the file and save it with the provided filename
+            $.ajax({
+                type: 'GET',
+                url: '/download',
+                data: { url: url, filename: filename },
+                success: function (response) {
+                    alert(response); // Display a message indicating success or failure
+                    clickedLink.addClass('resolution_exists');
+                    clickedLink.removeClass('resolution_available');
+                    clickedLink.removeClass('download-link');
+                },
+                error: function () {
+                    alert('Error downloading the file.');
+                }
+            });
+        });
+    });
\ No newline at end of file
diff --git a/app/static/javascript/ydl.js b/app/static/javascript/ydl.js
new file mode 100644
index 0000000..4c41c76
--- /dev/null
+++ b/app/static/javascript/ydl.js
@@ -0,0 +1,21 @@
+function clearInput() {
+    $('#download_field').val(''); // Clear the input field
+}
+        
+// Handle the form submission with AJAX
+$(document).ready(function () {
+    $('#ydl_download').submit(function (event) {
+        event.preventDefault(); // Prevent the default form submission
+        alert("File is now downloading");
+
+        $.ajax({
+            type: 'POST', // Use POST method to send data
+            url: '/ydl', // Target URL for the CherryPy handler
+            data: $('#ydl_download').serializeArray(), // Serialize the form data
+            success: function (data) {
+                $('#downloadResult').html(data); // Display the result in the specified div
+                alert("File has finished downloading");
+            }
+        });
+    });
+});
\ No newline at end of file
diff --git a/app/templates/ydl.html b/app/templates/ydl.html
new file mode 100644
index 0000000..62ac6bc
--- /dev/null
+++ b/app/templates/ydl.html
@@ -0,0 +1,33 @@
+<html>
+
+<head>
+    <title>YDL</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="stylesheet" type="text/css" href="static/css/style.css">
+    <link rel="stylesheet" type="text/css" href="static/css/boxicons.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+
+<body>
+    <!-- <div id="glass"></div> -->
+    <!-- {navBar} -->
+    <form id="ydl_download">
+        <input class="downloader" name="url" type="text" id="download_field" placeholder="Enter URL">
+        <select class="downloader" name="location" id="download_location">
+            <option value="/nsfw">NSFW</option>
+            <option value="/podcasts">Podcast</option>
+            <option value="/asmr">ASMR</option>
+            <option value="/youtube">YouTube</option>
+        </select><br>
+        <button class="downloader" type="submit">Download</button> <!-- Added a submit button -->
+    </form>
+    <div id="downloadResult"></div>
+</body>
+
+<script type="text/javascript" src="static/javascript/general.js"></script>
+<script type="text/javascript" src="static/javascript/ydl.js"></script>
+
+</html>
\ No newline at end of file