diff --git a/LyricsPy/templates/base.html b/LyricsPy/templates/base.html
index d396d4b..ebacb20 100644
--- a/LyricsPy/templates/base.html
+++ b/LyricsPy/templates/base.html
@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <title>My Song Lyrics</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <!-- DataTables CSS -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
 </head>
 <body>
     <div class="container">
@@ -20,7 +22,17 @@
         <hr>
         {% block content %}{% endblock %}
     </div>
+ 
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <!-- DataTables JS -->
+    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
+    
     <script>
+        $(document).ready(function() {
+            $('#songTable').DataTable();
+        });
+        
         function openTab(evt, tabName) {
             var i, tabcontent, tablinks;
             tabcontent = document.getElementsByClassName("tabcontent");
diff --git a/LyricsPy/templates/index.html b/LyricsPy/templates/index.html
index 82736fc..b8d9b86 100644
--- a/LyricsPy/templates/index.html
+++ b/LyricsPy/templates/index.html
@@ -9,7 +9,7 @@
 <div id="Songs" class="tabcontent">
     <h2>Song List</h2>
     {% if songs %}
-    <table>
+    <table id="songTable" class="display">
         <thead>
             <tr>
                 <th>Title</th>
diff --git a/LyricsPy/templates/search.html b/LyricsPy/templates/search.html
index 2031564..d0d6c03 100644
--- a/LyricsPy/templates/search.html
+++ b/LyricsPy/templates/search.html
@@ -4,7 +4,7 @@
 <h2>Search Results for "{{ query }}"</h2>
 
 {% if songs %}
-    <table>
+    <table id="songTable" class="display">
         <thead>
             <tr>
                 <th>Title</th>
