diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue
new file mode 100644
index 0000000..c172996
--- /dev/null
+++ b/src/algorithms/linked-list/Linked-List.vue
@@ -0,0 +1,397 @@
+<template>
+  <div>
+    <h1>Linked List</h1>
+    <div ref="circleContainer"></div>
+    <div v-if="showSuccessResult" class="success-message">
+      Searched item {{ targetValue }} found at: "{{ result }}"
+    </div>
+
+    <div v-if="showFailureResult" class="fail-message">
+      Searched item not found!
+    </div>
+    <hr>
+    <form v-if="showInputForm" @submit.prevent="insertFormSubmitAction">
+      <input v-model="insertedValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Add</button>
+    </form>
+    <form v-if="showSearchForm" @submit.prevent="searchIntoLinkedList">
+      <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Search</button>
+    </form>
+    <form v-if="showDeleteForm" @submit.prevent="removeItemFromLinkedList">
+      <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Delete</button>
+    </form>
+    <button @click="toggleSearchForm">Search</button>
+    <button @click="toggleInsertForm">Insert</button>
+    <button @click="toggleDeleteForm">Delete Node</button>
+  </div>
+</template>
+
+<script>
+class Node {
+  constructor(data) {
+    this.data = data;
+    this.next = null;
+    this.element = {};
+  }
+}
+
+class LinkedList {
+  constructor() {
+    this.head = null;
+  }
+
+  append(data, element) {
+    const newNode = new Node(data);
+    newNode.element.circle = element.circle.circle;
+    newNode.element.text = element.circle.text;
+    if (!this.head) {
+      newNode.element.arrow = element.arrow;
+      this.head = newNode;
+      return;
+    }
+
+    let current = this.head;
+    while (current.next) {
+      current = current.next;
+    }
+    current.element.arrow = element.arrow;
+    current.next = newNode;
+  }
+
+  display() {
+    let current = this.head;
+    while (current) {
+      console.log("data: ", current.data, " Element: ", current.element);
+      current = current.next;
+    }
+  }
+}
+
+
+import * as d3 from 'd3';
+
+export default {
+  name: "Linked-List",
+  data() {
+    return {
+      linkedList: undefined,
+      result: "",
+      showSuccessResult: false,
+      showFailureResult: false,
+      xAxis: 20,
+      arrowXAxis: 0,
+      circleRadius: 5,
+      elements: [],
+      circleContainer: undefined,
+      showInputForm: false,
+      showSearchForm: false,
+      showDeleteForm: false,
+      targetValue: null,
+      insertedValue: null,
+    }
+  },
+
+  methods: {
+    createContainer() {
+      this.circleContainer = d3.select(this.$refs.circleContainer)
+          .append('svg')
+          .attr('width', 500)
+          .attr('height', 200);
+    },
+
+    change() {
+      for (const element of this.elements) {
+        element.circle.transition()
+            .duration(1000) // Animation duration in milliseconds
+            .attr('fill', 'rgba(0, 255, 0, 0.8)');
+      }
+    },
+
+    toggleInsertForm() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      this.showInputForm = !this.showInputForm;
+      this.hideDeleteForm();
+      this.hideSearchForm();
+    },
+
+    toggleSearchForm() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      this.showSearchForm = !this.showSearchForm;
+      this.hideDeleteForm();
+      this.hideInsertForm();
+    },
+
+    toggleDeleteForm() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      this.hideInsertForm();
+      this.hideSearchForm();
+      this.showDeleteForm = !this.showDeleteForm;
+    },
+
+    hideDeleteForm() {
+      this.showDeleteForm = false;
+    },
+    hideInsertForm() {
+      this.showInputForm = false;
+    },
+    hideSearchForm() {
+      this.showSearchForm = false;
+    },
+
+    insertFormSubmitAction() {
+      if (this.insertedValue > 0) {
+
+        this.appendIntoLinkedList(this.insertedValue);
+        this.showInputForm = false;
+        this.insertedValue = null;
+      } else {
+        console.error("You've added negative number");
+      }
+    },
+
+    createCircle(num, createArrow) {
+      const finalRadius = 20;
+
+      const circle = this.circleContainer.append('circle')
+          .attr('cx', this.xAxis)
+          .attr('cy', 100)
+          .attr('r', this.circleRadius)
+          .attr('fill', 'rgba(0, 0, 255, 0.5)')
+          .attr('opacity', .5);
+      circle.transition()
+          .duration(1000) // Animation duration in milliseconds
+          .attr('r', finalRadius);
+
+      const text = this.circleContainer.append('text')
+          .attr('x', this.xAxis)
+          .attr('y', 100)
+          .attr('dy', '.4em') // Vertical alignment adjustment
+          .attr('text-anchor', 'middle') // Horizontal alignment
+          .text(num);
+      if (createArrow) {
+        this.createArrow(this.xAxis + 70);
+      }
+      this.elements.push({circle: circle, text: text});
+
+      this.xAxis += this.circleRadius * 20;
+
+      return {circle: circle, text: text};
+    },
+
+    createArrow(groupX) {
+      const arrowLength = 20;
+      const arrowY = 100;
+
+      const linesGroup = this.circleContainer.append('g')
+          .attr('transform', `translate(${groupX}, 0)`); // Set the group's x position
+
+      linesGroup.append('line')
+          .attr('x1', -arrowLength - 20) // Relative to the group's x position
+          .attr('y1', arrowY)
+          .attr('x2', 0) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      linesGroup.append('line')
+          .attr('x1', -10) // Relative to the group's x position
+          .attr('y1', arrowY - 5)
+          .attr('x2', -arrowLength + 20) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      linesGroup.append('line')
+          .attr('x1', -10) // Relative to the group's x position
+          .attr('y1', arrowY + 5)
+          .attr('x2', -arrowLength + 20) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      return linesGroup;
+    },
+
+    appendIntoLinkedList(num, pos) {
+
+      if (!pos) {
+        const circle = this.createCircle(num);
+        let arrow;
+
+        if (this.linkedList.head) {
+          arrow = this.createArrow((this.xAxis - this.circleRadius * 40) + 70);
+        }
+
+        this.linkedList.append(num, {circle: circle, arrow: arrow});
+      }
+    },
+
+    removeItemFromLinkedList() {
+      let current = this.linkedList.head;
+      let prev = current;
+      while (current) {
+
+        if (current.data === this.targetValue) {
+          let currentCircleXAxis = parseFloat(current.element.circle.attr('cx'));
+          let currentTextX = parseFloat(current.element.text.attr('x'));
+          let currentArrowX;
+
+          if (current.element.arrow) {
+            currentArrowX = parseFloat(current.element.arrow.attr('transform').replace(/[^\d.-]/g, '')) / 10;
+          } else if (prev.element.arrow) {
+            prev.element.arrow.remove();
+            prev.element.arrow = null;
+          }
+          current.element.circle.remove();
+          current.element.text.remove();
+
+          if (current.next) {
+            if (current.element.arrow) {
+              current.element.arrow.remove();
+              current.element.arrow = null;
+            }
+
+            if (current === this.linkedList.head) {
+              this.linkedList.head = current.next;
+            } else {
+              prev.next = current.next;
+            }
+
+            current = current.next;
+            while (current) {
+              current.element.circle.transition()
+                  .duration(1000)
+                  .attr('cx', currentCircleXAxis);
+
+              current.element.text.transition()
+                  .duration(1000)
+                  .attr('x', currentTextX);
+
+              if (current.element.arrow) {
+                current.element.arrow.attr('transform', `translate(${currentArrowX}, 0)`);
+              }
+
+              currentCircleXAxis = parseFloat(current.element.circle.attr('cx'));
+              currentTextX = parseFloat(current.element.text.attr('x'));
+
+              if (current.element.arrow) {
+                currentArrowX = parseFloat(current.element.arrow.attr('transform').split('(')[1].split(',')[0]);
+              }
+              current = current.next;
+            }
+
+          } else if (current === this.linkedList.head) {
+            this.linkedList.head = current.next;
+          } else if (prev) {
+            prev.next = null;
+          }
+          this.xAxis -= this.circleRadius * 20;
+          break;
+        }
+
+        prev = current;
+        current = current.next;
+      }
+
+      this.targetValue = null;
+    },
+
+    async searchIntoLinkedList() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+
+      if (this.targetValue > 0) {
+        this.showSearchForm = false;
+        let current = this.linkedList.head;
+        let found;
+        let pos = 1;
+
+        while (current) {
+          found = current.data === this.targetValue;
+          current.element.circle.transition()
+              .duration(500).attr('fill', "pink");
+
+          await new Promise(resolve => setTimeout(resolve, 600));
+
+          if (found) {
+            current.element.circle.transition()
+                .duration(1000).attr('fill', "green");
+            break;
+          }
+
+          await new Promise(resolve => setTimeout(resolve, 600));
+
+          if (current.next) {
+            if (current.element.arrow) {
+              current.element.arrow.selectAll('line').transition().duration(300).attr('stroke', "pink");
+            }
+            await new Promise(resolve => setTimeout(resolve, 300));
+          }
+
+          current = current.next;
+          pos++;
+        }
+
+        if (found) {
+          this.result = pos;
+          this.showSuccessResult = true;
+        } else {
+          this.showFailureResult = true;
+        }
+        this.targetValue = null;
+      }
+    },
+
+    generateLinkedList(nums) {
+      for (const n of nums) {
+        this.appendIntoLinkedList(n);
+      }
+    }
+  },
+  
+  mounted() {
+    this.createContainer();
+    this.linkedList = new LinkedList();
+    this.generateLinkedList([1, 2, 3])
+  },
+}
+</script>
+
+<style scoped>
+.success-message {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+.fail-message {
+  background-color: #af3e2e;
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+button {
+  background-color: #3c3f41;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  margin: 5px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+input {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/menu.vue b/src/components/menu.vue
index d377540..86e203a 100644
--- a/src/components/menu.vue
+++ b/src/components/menu.vue
@@ -22,6 +22,7 @@
                 { id: 1, label: 'Home', route: '/' },
                 { id: 2, label: 'Searching Algorithm', route: '/search' },
                 { id: 3, label: 'Sorting Algorithm', route: '/sort' },
+                { id: 4, label: 'Linked List', route: '/linked-list' },
                 // Add more menu items for other algorithms
             ];
 
diff --git a/src/routes/router.js b/src/routes/router.js
index df27c7e..9e3eead 100644
--- a/src/routes/router.js
+++ b/src/routes/router.js
@@ -2,11 +2,13 @@ import { createRouter, createWebHistory } from 'vue-router';
 import SearchView from './../algorithms/search/Search.vue';
 import homeView from './../algorithms/algorithms.vue';
 import SortView from './../algorithms/sort/Sort.vue';
+import LinkedList from './../algorithms/linked-list/Linked-List.vue';
 
 const routes = [
     { path: '/', component: homeView },
     { path: '/search', component: SearchView },
     { path: '/sort', component: SortView },
+    { path: '/linked-list', component: LinkedList },
     // Add more routes for other algorithm components
 ];
 

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/Bappy4u/algorithm-visualizer/pull/11.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/Bappy4u/algorithm-visualizer/pull/11.diff" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/Bappy4u/algorithm-visualizer/pull/11.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/Bappy4u/algorithm-visualizer/pull/11.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>