diff --git a/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/README.md b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/README.md
new file mode 100644
index 00000000..582e7596
--- /dev/null
+++ b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/README.md
@@ -0,0 +1,67 @@
+<h1 align='center'><b>💥 N-Queens Visualiser 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+ ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
+
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>Welcome to the **N-Queens Visualiser**! This web application allows you to visualize the classic N-Queens problem, where the objective is to place N queens on an N x N chessboard such that no two queens threaten each other. This is achieved by ensuring that no two queens share the same row, column, or diagonal.</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+To run this project locally, follow these steps:
+
+1. Fork the repository.
+
+2. Clone the repository to your local computer:
+    git clone https://github.com/Shariq2003/N-Queen-Visualiser.git
+
+3. Open the project folder in your preferred code editor, now you can view website in live.
+
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+
+<img src='./screenshot.webp'>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Shariq</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/shariq-sd'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/Shariq2003'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/chess.js b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/chess.js
new file mode 100644
index 00000000..f3abbb66
--- /dev/null
+++ b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/chess.js
@@ -0,0 +1,250 @@
+const numberbox = document.getElementById("numberbox");
+const slider = document.getElementById("slider");
+const progressBar = document.getElementById("progress-bar")
+const playButton = document.getElementById('play-button');
+const pauseButton = document.getElementById("pause-button");
+const queen = '<i class="fas fa-chess-queen" style="color:#000"></i>';
+
+let isMainContainerVisible = false;
+
+function toggleVisibility() {
+    const landingPage = document.querySelector('.landing-div');
+    const mainContainer = document.querySelector('.n-queen');
+
+    if (isMainContainerVisible) {
+        landingPage.style.display = 'none';
+        mainContainer.style.display = 'flex';
+    } else {
+        landingPage.style.display = 'block';
+        mainContainer.style.display = 'none';
+    }
+}
+window.onload = toggleVisibility;
+document.getElementById('start-button').onclick = function () {
+    isMainContainerVisible = true;
+    toggleVisibility();
+};
+
+
+let n, speed, tempSpeed, q, Board = 0;
+let array = [0, 2, 1, 1, 3, 11, 5, 41, 93];
+
+// Used to store the state of the boards;
+let pos = {};
+
+speed = (100 - slider.value) * 10;
+tempSpeed = speed;
+slider.oninput = function () {
+    progressBar.style.width = this.value + "%";
+    const sliderValue = parseInt(this.value, 10);
+    if (sliderValue <= 25) {
+        progressBar.style.backgroundColor = "green";
+        slider.className = 'slider green';
+    } else if (sliderValue > 25 && sliderValue <= 75) {
+        progressBar.style.backgroundColor = "#ffd200";
+        slider.className = 'slider yellow';
+    } else {
+        progressBar.style.backgroundColor = "red";
+        slider.className = 'slider red';
+    }
+
+    speed = sliderValue;
+    speed = (100 - speed) * 10;
+};
+
+
+
+class Queen {
+    constructor() {
+        this.position = Object.assign({}, pos);
+        this.uuid = [];
+    }
+
+    nQueen = async () => {
+        Board = 0;
+        this.position[`${Board}`] = {};
+        numberbox.disabled = true;
+        await q.solveQueen(Board, 0, n);
+        await q.clearColor(Board);
+        numberbox.disabled = false;
+    }
+
+    isValid = async (board, r, col, n) => {
+        //Setting the current box color to orange
+        const table = document.getElementById(`table-${this.uuid[board]}`);
+        const currentRow = table.firstChild.childNodes[r];
+        const currentColumn = currentRow.getElementsByTagName("td")[col];
+        currentColumn.innerHTML = queen;
+        await q.delay();
+
+        // Checking the queen in the same column
+        for (let i = r - 1; i >= 0; --i) {
+            const row = table.firstChild.childNodes[i];
+            const column = row.getElementsByTagName("td")[col];
+            const value = column.innerHTML;
+
+            if (value == queen) {
+                column.style.backgroundColor = "#ff0000";
+                currentColumn.innerHTML = "-"
+                return false;
+            }
+            column.style.backgroundColor = "#ddff00";
+            await q.delay();
+        }
+
+        //Checking the upper left diagonal
+        for (let i = r - 1, j = col - 1; i >= 0 && j >= 0; --i, --j) {
+            const row = table.firstChild.childNodes[i];
+            const column = row.getElementsByTagName("td")[j];
+            const value = column.innerHTML;
+
+            if (value == queen) {
+                column.style.backgroundColor = "#fb5607";
+                currentColumn.innerHTML = "-"
+                return false;
+            }
+            column.style.backgroundColor = "#ffca3a";
+            await q.delay();
+        }
+
+        // Checking the upper right diagonal
+        for (let i = r - 1, j = col + 1; i >= 0 && j < n; --i, ++j) {
+            const row = table.firstChild.childNodes[i];
+            const column = row.getElementsByTagName("td")[j];
+
+            const value = column.innerHTML;
+
+            if (value == queen) {
+                column.style.backgroundColor = "#FB5607";
+                currentColumn.innerHTML = "-"
+                return false;
+            }
+            column.style.backgroundColor = "#ffca3a";
+            await q.delay();
+        }
+        return true;
+    }
+
+    clearColor = async (board) => {
+        for (let j = 0; j < n; ++j) {
+            const table = document.getElementById(`table-${this.uuid[board]}`);
+            const row = table.firstChild.childNodes[j];
+            for (let k = 0; k < n; ++k)
+                (j + k) & 1
+                    ? (row.getElementsByTagName("td")[k].style.backgroundColor = "#03852e")
+                    : (row.getElementsByTagName("td")[k].style.backgroundColor = "#ffffff");
+        }
+    }
+
+    delay = async () => {
+        await new Promise((done) => setTimeout(() => done(), speed));
+    }
+
+    solveQueen = async (board, r, n) => {
+        if (r == n) {
+            ++Board;
+            let table = document.getElementById(`table-${this.uuid[Board]}`);
+            for (let k = 0; k < n; ++k) {
+                let row = table.firstChild.childNodes[k];
+                row.getElementsByTagName("td")[this.position[board][k]].innerHTML = queen;
+            }
+            this.position[Board] = this.position[board];
+            return;
+        }
+
+        for (let i = 0; i < n; ++i) {
+            await q.delay();
+            // console.log("outside:" + board);
+            await q.clearColor(board);
+            if (await q.isValid(board, r, i, n)) {
+                await q.delay();
+                // console.log("inside:" + board)
+                await q.clearColor(board);
+                let table = document.getElementById(`table-${this.uuid[board]}`);
+                let row = table.firstChild.childNodes[r];
+                row.getElementsByTagName("td")[i].innerHTML = queen;
+
+                this.position[board][r] = i;
+
+                if (await q.solveQueen(board, r + 1, n))
+                    await q.clearColor(board);
+
+                await q.delay();
+                board = Board;
+                // console.log(this.Board)
+                table = document.getElementById(`table-${this.uuid[board]}`);
+                // console.log(JSON.parse(JSON.stringify(table)));
+                row = table.firstChild.childNodes[r];
+                row.getElementsByTagName("td")[i].innerHTML = "-";
+
+                delete this.position[`${board}`][`${r}`];
+            }
+        }
+    }
+}
+
+playButton.onclick = async function visualise() {
+    const chessBoard = document.getElementById("n-queen-board");
+    const arrangement = document.getElementById("queen-arrangement");
+
+    n = numberbox.value;
+    q = new Queen();
+
+    if (n > 8) {
+        numberbox.value = "";
+        alert("Queen value is too large");
+        return;
+    } else if (n < 1) {
+        numberbox.value = "";
+        alert("Queen value is too small");
+        return;
+    }
+
+    // Removing all the of previous execution context
+    while (chessBoard.hasChildNodes()) {
+        chessBoard.removeChild(chessBoard.firstChild);
+    }
+    if (arrangement.hasChildNodes()) {
+        arrangement.removeChild(arrangement.lastChild)
+    }
+
+    const para = document.createElement("p");
+    para.setAttribute("class", "queen-info");
+    para.innerHTML = `For ${n}x${n} board, ${array[n] - 1} arrangements are possible.`;
+    arrangement.appendChild(para);
+
+    //Adding boards to the Div
+    if (chessBoard.childElementCount === 0) {
+        for (let i = 0; i < array[n]; ++i) {
+            q.uuid.push(Math.random());
+            let div = document.createElement('div');
+            let table = document.createElement('table');
+            let header = document.createElement('h4');
+            // div.setAttribute("id", `div-${100 + uuid[i]}`)
+            header.innerHTML = `Board ${i + 1} `
+            table.setAttribute("id", `table-${q.uuid[i]}`);
+            header.setAttribute("id", `paragraph-${i}`);
+            chessBoard.appendChild(div);
+            div.appendChild(header);
+            div.appendChild(table);
+        }
+    }
+
+    for (let k = 0; k < array[n]; ++k) {
+        let table = document.getElementById(`table-${q.uuid[k]}`);
+        for (let i = 0; i < n; ++i) {
+            const row = table.insertRow(i); // inserting ith row
+            row.setAttribute("id", `Row${i} `);
+            for (let j = 0; j < n; ++j) {
+                const col = row.insertCell(j); // inserting jth column
+                (i + j) & 1
+                    ? (col.style.backgroundColor = "#FF9F1C")
+                    : (col.style.backgroundColor = "#FCCD90");
+                col.innerHTML = "-";
+                col.style.border = "0.3px solid #373f51";
+            }
+        }
+        await q.clearColor(k);
+    }
+    await q.nQueen();
+};
\ No newline at end of file
diff --git a/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/index.css b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/index.css
new file mode 100644
index 00000000..1082b62d
--- /dev/null
+++ b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/index.css
@@ -0,0 +1,339 @@
+* {
+    box-sizing: border-box;
+}
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: "Arial", sans-serif;
+    background-color: #011627;
+}
+
+.header {
+    width: 100%;
+    background-color: #00464f;
+    color: #fdfffc;
+    position: absolute;
+    top: 0;
+}
+
+.header h2 {
+    padding: 0.5em;
+    text-align: center;
+}
+.landing-div {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    /* padding: 20px; */
+    /* border-radius: 15px; */
+    max-width: 800px;
+    font-weight: bold;
+    text-align: center;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    margin: 0 auto;
+    padding: 0 10px;
+}
+.justified-text {
+    text-align: justify;
+}
+.landing-div h1 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
+}
+
+#start-button {
+    margin-top: 20px;
+    padding: 15px 30px;
+    border: none;
+    background: linear-gradient(90deg, #f72585, #ff006e);
+    color: #fdfffc;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 20px;
+    transition: transform 0.2s, background-color 0.2s;
+}
+
+#start-button:hover {
+    transform: scale(1.05);
+    background: linear-gradient(90deg, #ff006e, #f72585);
+}
+
+.container {
+    min-width: 50%;
+    max-width: 1500px;
+    height: 80%;
+    background: linear-gradient(135deg, #ffffff, #e2e2e2);
+    margin-top: 5rem;
+    padding: 30px;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    overflow-y: auto;
+}
+
+div.n-queen {
+    width: 100%;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+/* .inputbox {
+    position: relative;
+    margin-bottom: 2em;
+    width: 100%;
+} */
+
+.inputbox {
+    width: 100%;
+    font-size: 16px;
+    padding: 10px;
+    background: #f9f9f9;
+    border-radius: 35px;
+    outline: none;
+    position: relative;
+    z-index: 1;
+    box-shadow: inset 0 0 0 4px transparent;
+    transition: box-shadow 0.3s ease-in-out;
+    margin-bottom: 25px;
+}
+
+.inputbox:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 25px;
+    z-index: -1;
+    background: linear-gradient(45deg, #f72585, #ff006e, #fa7921, #2ec4b6);
+    padding: 4px;
+    animation: rotateGradient 1s ease-in infinite;
+}
+
+@keyframes rotateGradient {
+    0% {
+        background: linear-gradient(45deg, #f72585, #ff006e, #fa7921, #2ec4b6);
+    }
+    15% {
+        background: linear-gradient(315deg, #2ec4b6, #f72585, #ff006e, #fa7921);
+    }
+    25% {
+        background: linear-gradient(135deg, #ff006e, #fa7921, #2ec4b6, #f72585);
+    }
+    35% {
+        background: linear-gradient(315deg, #2ec4b6, #f72585, #ff006e, #fa7921);
+    }
+    50% {
+        background: linear-gradient(225deg, #fa7921, #2ec4b6, #f72585, #ff006e);
+    }
+    65% {
+        background: linear-gradient(45deg, #f72585, #ff006e, #fa7921, #2ec4b6);
+    }
+    75% {
+        background: linear-gradient(135deg, #ff006e, #fa7921, #2ec4b6, #f72585);
+    }
+    85% {
+        background: linear-gradient(315deg, #2ec4b6, #f72585, #ff006e, #fa7921);
+    }
+    100% {
+        background: linear-gradient(315deg, #2ec4b6, #f72585, #ff006e, #fa7921);
+    }
+}
+
+.numberbox {
+    width: 100%;
+    font-size: 16px;
+    padding: 10px;
+    border: none;
+    border-radius: 35px;
+    outline: none;
+    transition: border-color 0.3s;
+    background-color: #f9f9f9;
+}
+
+.numberbox:focus {
+    border-color: #f72585;
+}
+
+.inputbox label {
+    position: absolute;
+    top: 23px;
+    left: 25px;
+    color: #2ec4b6;
+    font-size: 14px;
+    pointer-events: none;
+    transition: 0.3s;
+}
+
+.inputbox input:focus ~ label,
+.inputbox input:disabled ~ label,
+.inputbox input:valid ~ label {
+    top: -18px;
+    font-size: 12px;
+    font-weight: 400;
+}
+
+.slider-container {
+    position: relative;
+    width: 100%;
+    margin-top: 2em;
+}
+
+.slider {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 8px;
+    border-radius: 10px;
+    background: #d1d1d1;
+    outline: none;
+    transition: background 0.3s;
+}
+
+.slider:hover {
+    background: #b0b0b0;
+}
+
+.slider::after {
+    content: "SLOW";
+    position: absolute;
+    top: -25px;
+    font-size: 18px;
+    font-weight: 700;
+    color: #fa7921;
+}
+
+.slider::before {
+    content: "FAST";
+    position: absolute;
+    top: -25px;
+    right: 0px;
+    font-size: 18px;
+    font-weight: 700;
+    color: #fa7921;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 24px;
+    height: 24px;
+    background-color: #ffd200;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s ease; /* Smooth transition */
+}
+.slider.green::-webkit-slider-thumb {
+    background-color: green;
+}
+
+.slider.yellow::-webkit-slider-thumb {
+    background-color: #ffd200;
+}
+
+.slider.red::-webkit-slider-thumb {
+    background-color: red;
+}
+.slider::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    background-color: #fa7921;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
+#progress-bar {
+    width: 40%;
+    height: 8px;
+    background: #ffd200;
+    border-radius: 10px;
+    position: absolute;
+    top: 7px;
+    transition: background-color 0.3s ease; /* Smooth transition */
+}
+
+.play-button {
+    margin-top: 20px;
+    padding: 15px 30px;
+    border: none;
+    background: linear-gradient(90deg, #0162ff, #ff006e);
+    color: #fdfffc;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 20px;
+    transition: transform 0.2s, background-color 0.2s;
+}
+
+.play-button:hover {
+    transform: scale(1.05);
+    background: linear-gradient(90deg, #ff006e, #0162ff);
+}
+.queen-arrangement {
+    margin-top: 20px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+    color: #247ba0;
+}
+
+#n-queen-board {
+    display: flex;
+    width: 100%;
+    margin: 20px auto;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+#n-queen-board div {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin: 0 10px;
+    border-radius: 3px;
+    bottom: 10px;
+}
+
+table {
+    border-collapse: collapse;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 2);
+    margin: 0 auto;
+}
+
+td {
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    border: 1px solid #000;
+}
+
+h4 {
+    padding: 8px;
+    background-color: #0582ca;
+    color: #fdfffc;
+    text-align: center;
+    border-radius: 4px;
+}
\ No newline at end of file
diff --git a/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/index.html b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/index.html
new file mode 100644
index 00000000..8fada0d4
--- /dev/null
+++ b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>N-Queen-Visualiser</title>
+        <link
+            rel="stylesheet"
+            href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+        />
+        <link rel="stylesheet" href="index.css" />
+    </head>
+    <body>
+        <header class="header">
+            <h2>
+                N-Queens Visualiser
+                <i class="fas fa-crown" style="color: #fdfffc"></i>
+            </h2>
+        </header>
+        <div class="container">
+            <div class="landing-div">
+                <h1>Welcome to the Chess Visualiser</h1>
+                <h4 class="objective-title">Objective</h4>
+                <p class="justified-text">
+                    The objective of the N-Queens problem is to place N queens on an N x N chessboard so that no two queens can attack each other. This means that no two queens can share the same row, column, or diagonal. The problem has been around since the 19th century and has fascinated mathematicians, computer scientists, and puzzle enthusiasts for decades. 
+                    The problem is considered a classic example of a problem that can be solved using recursion and backtracking. You can formulate the problem recursively by:<br/><br/>
+                    1. Simplifying the problem to the most trivial case<br/>
+                    2. Generating all possible permutations of the queens' positions<br/>
+                    3. Checking if each permutation is a valid placement.
+                </p>
+                <button id="start-button">Get Started</button>
+            </div>
+            <div class="n-queen">
+                <div class="inputbox">
+                    <input
+                        type="number"
+                        class="numberbox"
+                        id="numberbox"
+                        required
+                    />
+                    <label>Enter the Number of Queens</label>
+                </div>
+                <div class="slider-container">
+                    <input
+                        class="slider"
+                        id="slider"
+                        type="range"
+                        min="0"
+                        max="100"
+                        value="40"
+                    />
+                    <div id="progress-bar"></div>
+                </div>
+                <button class="play-button" id="play-button">
+                    <i class="fa fa-play" aria-hidden="true"></i> Play
+                </button>
+            </div>
+            <div class="queen-arrangement" id="queen-arrangement"></div>
+            <div id="n-queen-board"></div>
+        </div>
+        <script src="chess.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/screenshot.webp b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/screenshot.webp
new file mode 100644
index 00000000..cad22b8d
Binary files /dev/null and b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/screenshot.webp differ
diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md
index 7de4943c..1c1da4b1 100644
--- a/Vanilla-JS-Projects/README.md
+++ b/Vanilla-JS-Projects/README.md
@@ -224,6 +224,7 @@
 |:--:|:--:|:--:|
 | [Zomato Clone](./Intermediate/Zomato-Clone) |  |  |
 
+
 ---
 <!-- ###################################################################################################################### -->
 <!-- ###################################################################################################################### -->
@@ -250,9 +251,9 @@
 
 #### :zap: Row 4
 
-| <img src="./Advanced/Vocabulary-Builder/screenshot.webp" width="300px" height="180px"> |  |  |
+| <img src="./Advanced/Vocabulary-Builder/screenshot.webp" width="300px" height="180px"> | <img src="./Advanced/N-Queen-Visualizer/screenshot.webp" width="300px" height="180px"> |  |
 |:--:|:--:|:--:|
-| [Vocabulary Builder](./Advanced/Vocabulary-Builder) |  |  |
+| [Vocabulary Builder](./Advanced/Vocabulary-Builder) | [N Queen Visualizer](./Advanced/N-Queen-Visualizer/) |  |  |
 
 
 </div>