diff --git a/index.html b/index.html
index 226b6a3..f020e8c 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>S4NKALP's Links</title>
-    <link rel="icon" href="images/favicon.svg" type="image/png" />
+    <link rel="icon" href="images/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="style.css" />
     <link
       rel="stylesheet"
@@ -25,13 +25,14 @@
         <input
           type="text"
           class="filter-links hide"
-          placeholder="Search Links"
+          placeholder="Search links by name or description..."
+          arial-label="Search links"
         />
         <ul class="link-list"></ul>
       </section>
       <h4>
         Made with ❤ by
-        <a href="https://github.com/S4NKALP/links">Z4CKX</a>
+        <a href="https://github.com/S4NKALP/links">S4NKALP</a>
       </h4>
     </main>
   </body>
diff --git a/script.js b/script.js
index f8387e7..fb06eab 100644
--- a/script.js
+++ b/script.js
@@ -1,31 +1,31 @@
-const username = 'S4NKALP';
-const linkList = document.querySelector('.link-list');
-const linksSection = document.querySelector('.links');
-const filterInput = document.querySelector('.filter-links');
+const username = "S4NKALP";
+const linkList = document.querySelector(".link-list");
+const linksSection = document.querySelector(".links");
+const filterInput = document.querySelector(".filter-links");
 
-const buildIcon = (link) => {
-    return `
-        <span class='${link.icon}' style='color: ${link.color};'></span>
-    `;
+// Function to build an icon element with appropriate color styling
+const buildIcon = (linkk) => {
+    return `<span class='${linkk.icon}' style='color: ${linkk.color};'></span>`;
 };
 
-const buildUrl = (link) => {
-    if (link.url.includes('http')) {
-        return link.url;
+// Function to construct the correct URL format based on its type
+const buildUrl = (linkk) => {
+    if (linkk.url.startsWith("http") || linkk.url.startsWith("mailto")) {
+        return linkk.url;
     }
-    if (link.url.includes('mailto')) {
-        return link.url;
-    }
-    return 'https://' + link.url + username;
+    return `https://${linkk.url}${linkk.url.endsWith("/") ? "" : "/"}${username}`;
 };
 
-const displayLinks = (links) => {
-    filterInput.classList.remove('hide');
-    for (const link of links) {
-        let listItem = document.createElement('li');
-        listItem.classList.add('link');
+// Function to display the links dynamically
+const displayLinks = (linkk) => {
+    filterInput.classList.remove("hide");
+    linkList.innerHTML = ""; // Clear existing links before adding new ones
+
+    for (const link of linkk) {
+        let listItem = document.createElement("li");
+        listItem.classList.add("link");
         listItem.innerHTML = `
-            <a href=${buildUrl(link)} target='_blank'>
+            <a href="${buildUrl(link)}" target="_blank" rel="noopener noreferrer">
                 <div>
                     <h3>
                         ${buildIcon(link)}
@@ -34,160 +34,151 @@ const displayLinks = (links) => {
                     <p>${link.description}</p>
                 </div>
             </a>`;
-        linkList.append(listItem);
+        linkList.appendChild(listItem);
     }
 };
 
-// dynamic search
-filterInput.addEventListener('input', (e) => {
-    const search = e.target.value;
-    const links = document.querySelectorAll('.link');
-    const searchLowerText = search.toLowerCase();
+// Dynamic search functionality
+filterInput.addEventListener("input", (e) => {
+    const searchText = e.target.value.toLowerCase();
+    const links = document.querySelectorAll(".link");
 
-    for (const link of links) {
-        const lowerText = link.innerText.toLowerCase();
-        if (lowerText.includes(searchLowerText)) {
-            link.classList.remove('hide');
-        } else {
-            link.classList.add('hide');
-        }
-    }
+    links.forEach((link) => {
+        link.textContent.toLowerCase().includes(searchText)
+            ? link.classList.remove("hide")
+            : link.classList.add("hide");
+    });
 });
 
-const links = [
+// Array of links with details
+const linkk = [
     {
-        name: 'Mail',
-        description: 'Want to talk? Write me a mail',
-        url: 'mailto:sankalptharu50028@gmail.com',
-        icon: 'fa-brands fa-telegram',
-        color: '#0088cc'
+        name: "Mail",
+        description: "Want to talk? Write me a mail",
+        url: "mailto:sankalptharu50028@gmail.com",
+        icon: "fa-brands fa-telegram",
+        color: "#0088cc",
     },
     {
-        name: 'Facebook',
-        description: 'Glimpse of my life and journey',
-        url: 'https://facebook.com/sankalptharu50028',
-        icon: 'fa-brands fa-facebook',
-        color: '#1877F2',
+        name: "Facebook",
+        description: "Glimpse of my life and journey",
+        url: "https://facebook.com/sankalptharu50028",
+        icon: "fa-brands fa-facebook",
+        color: "#1877F2",
     },
     {
-        name: 'GitHub',
-        description: 'My favourite place :)',
-        url: 'github.com/',
-        icon: 'fa-brands fa-github',
-        color: '#fff'
+        name: "GitHub",
+        description: "My favourite place :)",
+        url: "github.com/",
+        icon: "fa-brands fa-github",
+        color: "#fff",
     },
     {
-        name: 'Resume',
-        description: 'What I have done so far',
-        url: 'https://github.com/S4NKALP/resume/blob/main/resume.pdf',
-        icon: 'fa-brands fa-wpforms',
-        color: '#008abd'
+        name: "GitLab",
+        description: "My favourite place :)",
+        url: "gitlab.com/",
+        icon: "fa-brands fa-gitlab",
+        color: "#f57c00",
     },
     {
-        name: 'Twitter',
-        description: 'Tech, rants, philosophy, memes',
-        url: 'twitter.com/',
-        icon: 'fa-brands fa-twitter',
-        color: '#1da1f2'
+        name: "Resume",
+        description: "What I have done so far",
+        url: "https://github.com/S4NKALP/resume/blob/main/resume.pdf",
+        icon: "fa-brands fa-wpforms",
+        color: "#008abd",
     },
     {
-        name: 'YouTube',
-        description: 'I make tooling videos for devs',
-        url: 'youtube.com/c/',
-        icon: 'fa-brands fa-youtube',
-        color: '#ff0000'
+        name: "Twitter",
+        description: "Tech, rants, philosophy, memes",
+        url: "twitter.com/",
+        icon: "fa-brands fa-twitter",
+        color: "#1da1f2",
     },
     {
-        name: 'LinkedIn',
-        description: 'Career updates and thoughts',
-        url: 'linkedin.com/in/',
-        icon: 'fa-brands fa-linkedin',
-        color: '#0077B5'
+        name: "YouTube",
+        description: "I make tooling videos for devs",
+        url: "youtube.com/",
+        icon: "fa-brands fa-youtube",
+        color: "#ff0000",
     },
     {
-        name: 'Blog',
-        description: 'About things I build and learn',
-        url: 'https://S4NKALP.github.io/blog',
-        icon: 'fa-brands fa-blogger',
-        color: '#f57c00'
+        name: "LinkedIn",
+        description: "Career updates and thoughts",
+        url: "linkedin.com/",
+        icon: "fa-brands fa-linkedin",
+        color: "#0077B5",
     },
     {
-        name: 'Portfolio',
-        description: '/home/S4NKALP',
-        url: 'https://S4NKALP.github.io/Protofolio',
-        icon: 'fa-brands fa-fort-awesome',
-        color: '#1688f0'
+        name: "Blog",
+        description: "About things I build and learn",
+        url: "https://S4NKALP.github.io/blog",
+        icon: "fa-brands fa-blogger",
+        color: "#f57c00",
     },
     {
-        name: 'Projects',
-        description: 'All my projects!',
-        url: 'https://S4NKALP.github.io/projects',
-        icon: 'fa-brands fa-product-hunt',
-        color: '#da552f'
+        name: "Portfolio",
+        description: "/home/S4NKALP",
+        url: "https://S4NKALP.github.io/Protofolio",
+        icon: "fa-brands fa-fort-awesome",
+        color: "#1688f0",
     },
     {
-        name: 'Instagram',
-        description: 'Glimpse of my life and journey',
-        url: 'https://instagram.com/o0xsankalp',
-        icon: 'fa-brands fa-instagram',
-        color: '#e1306c'
+        name: "Projects",
+        description: "All my projects!",
+        url: "https://S4NKALP.github.io/projects",
+        icon: "fa-brands fa-product-hunt",
+        color: "#da552f",
     },
     {
-        name: 'Reddit',
-        description: 'Lurk mostly, sometimes I post',
-        url: 'reddit.com/user/',
-        icon: 'fa-brands fa-reddit',
-        color: '#ff4500'
+        name: "Instagram",
+        description: "Glimpse of my life and journey",
+        url: "https://instagram.com/",
+        icon: "fa-brands fa-instagram",
+        color: "#e1306c",
     },
     {
-        name: 'Dev',
-        description: 'Where I connect with Devs',
-        url: 'dev.to/',
-        icon: 'fa-brands fa-dev',
-        color: '#ccc'
+        name: "Reddit",
+        description: "Lurk mostly, sometimes I post",
+        url: "reddit.com/user/",
+        icon: "fa-brands fa-reddit",
+        color: "#ff4500",
     },
     {
-        name: 'HackerRank',
-        description: 'For problem solving skills',
-        url: 'hackerrank.com/',
-        icon: 'fa-brands fa-hackerrank',
-        color: '#1ba94c'
+        name: "Dev",
+        description: "Where I connect with Devs",
+        url: "dev.to/",
+        icon: "fa-brands fa-dev",
+        color: "#ccc",
     },
     {
-        name: 'Exercism',
-        description: 'For learning new languages',
-        url: 'exercism.org/profiles/',
-        icon: 'fa-brands fa-font-awesome',
-        color: '#1b51d2'
+        name: "HackerRank",
+        description: "For problem-solving skills",
+        url: "hackerrank.com/",
+        icon: "fa-brands fa-hackerrank",
+        color: "#1ba94c",
     },
     {
-        name: 'freeCodeCamp',
-        description: 'Where I started web dev',
-        url: 'freecodecamp.org/',
-        icon: 'fa-brands fa-free-code-camp',
-        color: '#006400'
+        name: "Exercism",
+        description: "For learning new languages",
+        url: "exercism.org/profiles/",
+        icon: "fa-brands fa-font-awesome",
+        color: "#1b51d2",
     },
     {
-        name: 'Twitch',
-        description: 'I stream my side projects!',
-        url: 'twitch.tv/',
-        icon: 'fa-brands fa-twitch',
-        color: '#6441a5'
+        name: "freeCodeCamp",
+        description: "Where I started web dev",
+        url: "freecodecamp.org/",
+        icon: "fa-brands fa-free-code-camp",
+        color: "#006400",
     },
     {
-        name: 'Leetcode',
-        description: 'More problem solving',
-        url: 'leetcode.com/',
-        icon: 'fa-brands fa-black-tie',
-        color: '#e08b32'
+        name: "Leetcode",
+        description: "More problem-solving",
+        url: "leetcode.com/",
+        icon: "fa-brands fa-black-tie",
+        color: "#e08b32",
     },
-    {
-        name: 'Codepen',
-        description: 'For trying out design ideas',
-        url: 'codepen.io/',
-        icon: 'fa-brands fa-codepen',
-        color: '#888'
-    }
 ];
 
-displayLinks(links);
+// Display all links initially
+displayLinks(linkk);
diff --git a/style.css b/style.css
index ee0d9a5..52caf26 100644
--- a/style.css
+++ b/style.css
@@ -2,9 +2,9 @@
     :root {
         --text: #111;
         --accent: #1688f0;
-        --bg-main: #fff;
-        --bg-link: #f0f0f0;
-        --bg-alt: #f5f5f5;
+        --bg-main: linear-gradient(to bottom right, #fff, #f0f0f0);
+        --bg-link: linear-gradient(to bottom right, #f0f0f0, #e0e0e0);
+        --bg-alt: linear-gradient(to bottom right, #f5f5f5, #e0e0e0);
     }
 }
 
@@ -12,9 +12,9 @@
     :root {
         --text: #e5e5e5;
         --accent: #1688f0;
-        --bg-main: #000;
-        --bg-link: #0f0f1a;
-        --bg-alt: #0a0a0f;
+        --bg-main: linear-gradient(to bottom right, #000, #0a0a0f);
+        --bg-link: linear-gradient(to bottom right, #0f0f1a, #1a1a2e);
+        --bg-alt: linear-gradient(to bottom right, #0a0a0f, #1a1a2e);
     }
 }
 
@@ -27,10 +27,11 @@ body {
     align-items: center;
     justify-content: center;
     margin: 0;
-    font-family: 'Open Sans', sans-serif;
-    background-color: var(--bg-main);
+    font-family: "Open Sans", sans-serif;
+    background: var(--bg-main);
     color: var(--text);
     font-size: 16px;
+    min-height: 100vh;
 }
 
 .container {
@@ -44,7 +45,6 @@ body {
 }
 
 .hide {
-    /* '!important' is to make sure that when we add the class using JS, it takes precendence */
     display: none !important;
 }
 
@@ -75,15 +75,21 @@ h2 {
 img {
     border: 2px solid var(--accent);
     box-shadow:
-        0 0px 6px var(--accent),
-        0 0px 6px var(--accent);
+        0 0 8px rgba(22, 136, 240, 0.8),
+        0 0 12px rgba(22, 136, 240, 0.6);
     max-width: 100%;
     height: auto;
+    border-radius: 8px;
 }
 
 a {
     color: var(--accent);
     text-decoration: none;
+    transition: color 0.3s ease-in-out;
+}
+
+a:hover {
+    color: #125ea8;
 }
 
 ul {
@@ -103,18 +109,21 @@ input {
     border: 2px solid var(--accent);
     color: var(--text);
     text-align: center;
+    box-shadow:
+        0 4px 6px rgba(22, 136, 240, 0.4),
+        0 1px 3px rgba(22, 136, 240, 0.3);
 }
 
 .links {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    background-color: var(--bg-link);
-    margin-top: 0;
+    background: var(--bg-link);
     padding: 2em;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    margin-bottom: 4em;
+    border-radius: 20px;
+    box-shadow:
+        0 4px 10px rgba(22, 136, 240, 0.4),
+        0 1px 3px rgba(22, 136, 240, 0.3);
 }
 
 h3 {
@@ -140,14 +149,19 @@ h3 {
     border: 1px solid var(--accent);
     padding: 1em;
     text-align: center;
-    background-color: var(--bg-alt);
+    background: var(--bg-alt);
+    transition: all 0.3s ease-in-out;
+    box-shadow:
+        0 4px 6px rgba(22, 136, 240, 0.2),
+        0 1px 3px rgba(22, 136, 240, 0.2);
 }
 
 .link-list li:hover {
-    background-color: var(--bg-main);
+    background: var(--bg-main);
+    transform: scale(1.02);
     box-shadow:
-        0 3px 6px var(--accent),
-        0 3px 6px var(--accent);
+        0 6px 12px rgba(22, 136, 240, 0.5),
+        0 3px 8px rgba(22, 136, 240, 0.4);
 }
 
 @media (min-width: 700px) {