diff --git a/web/myapp/SERVICE/templates/SERVICE/index.html b/web/myapp/SERVICE/templates/SERVICE/index.html
index 9c1aec1..d5d1539 100644
--- a/web/myapp/SERVICE/templates/SERVICE/index.html
+++ b/web/myapp/SERVICE/templates/SERVICE/index.html
@@ -12,6 +12,14 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300&family=Orbit&display=swap" rel="stylesheet">
+
+    <!-- jQuery UI CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
+
+    <!-- jQuery and jQuery UI JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+
     <title>Service Page</title>
 
     <script>
@@ -50,7 +58,7 @@
           <!-- <label for="site-search">Search the tag:</label> -->
           <div class='search_tag'>
             <input 
-              type="text" style="font-family: 'Noto Sans KR', sans-serif;" class="flexible-textbox" id = 'input-tag'  placeholder="  검색할 태그를 입력해 주세요: 형식은 #tag" 
+              type="text" style="font-family: 'Noto Sans KR', sans-serif;" class="flexible-textbox" id = 'input-tag' placeholder="  검색할 태그를 입력해 주세요: 형식은 #tag" 
             />
           </div>
           <!-- <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png"> -->
diff --git a/web/myapp/static/css/styles.css b/web/myapp/static/css/styles.css
index 061f6a4..5864e16 100644
--- a/web/myapp/static/css/styles.css
+++ b/web/myapp/static/css/styles.css
@@ -123,6 +123,7 @@ body{
     justify-content : center;
     align-items: center;
     margin-bottom: 15px;
+    font-size: 16px
 }
 
 #input-tag{
@@ -135,11 +136,31 @@ body{
     margin-left: 10px;
     margin-right: 10px;
     margin-bottom: 7px;
+    padding-left: 20px;
     border-radius: 10px;
     background-color:rgba(248,249,250,1);
     border: 1px solid black;
     font-weight: bold;
 }
+
+#ui-id-1 {
+  font-weight: bold;
+  font-size: 16px;
+  border-radius: 10px;
+}
+.ui-menu-item-wrapper {
+  border-radius: 10px;
+  text-indent: 10px;  /* Indent text here */
+}
+.ui-menu-item {
+  border-radius: 10px;
+} 
+.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
+  background: #6693bc !important;
+  font-weight: bold !important;
+  color: #ffffff !important;
+}
+
 #add-tag{
   width:95%;
   height: 50px;
diff --git a/web/myapp/static/js/main.js b/web/myapp/static/js/main.js
index 05988ca..34e1a5d 100644
--- a/web/myapp/static/js/main.js
+++ b/web/myapp/static/js/main.js
@@ -2,7 +2,28 @@ var userBookmark = [];
 var tags = new Set();
 var selectedTags = new Set();
 var $ = jQuery;
-window.onload = function() {
+
+$(document).ready(function() {
+    // This part ensures the first character is always '#'
+    var placeholderText = "검색할 태그를 입력해 주세요: 형식은 #tag";
+    $("#input-tag").on("input", function() {
+        var val = $(this).val();
+        if (val && val[0] !== "#") {
+            $(this).val("#" + val);
+        } else if (!val) {
+            $(this).val("#");
+        }
+    }).on("focus", function() {
+        var val = $(this).val();
+        if (val === "") {
+            $(this).val("#");
+        }
+    }).on("blur", function() {
+        var val = $(this).val();
+        if (val === "#") {
+            $(this).val("");
+        }
+    }).attr("placeholder", placeholderText);
 
     console.log(userBookmark)
 
@@ -43,6 +64,22 @@ window.onload = function() {
         }
     }
 
+    $(function() {
+        var tagArray = Array.from(tags);
+        
+        $("#input-tag").autocomplete({
+          source: function(request, response) {
+            var results = $.ui.autocomplete.filter(tagArray, request.term);
+            response(results.slice(0, 10));
+          },
+          minLength: 2, // Show suggestions only after one character is typed
+          select: function(event, ui) {
+            // code to execute when a suggestion is selected
+          }
+        });
+      });
+      
+
     function selectTags(tag,tagElement){   //클릭으로 태그를 선택하는 함수
 
         if (selectedTags.has(tag)) {
@@ -130,22 +167,10 @@ window.onload = function() {
                 }
             html += '</td>';
             html += '<td>' + '<div class="tags-block-container"></div>' + '</td>';
-            html += '<td><input type="checkbox" class="check_btn" ></td>';
             html += '</tr>';
             }
         dynamicTbody.innerHTML = html;  
-        showModalBtn();
-        // showCheckBtn();
-        var checkboxes = document.getElementsByClassName('check_btn');
-        for (var i = 0; i < checkboxes.length; i++) {
-            checkboxes[i].addEventListener('click', function() {
-                deleteRow(this);
-                showModal(userBookmark[i]);
-                collectAllTags();
-                showSelectedTags();
-                showRows();
-            });
-        }
+        showModalBtn()
     }
     function showSelectedRows() {
         const rows = document.getElementById("bookmarks_whole").querySelectorAll('tr');
@@ -332,28 +357,6 @@ window.onload = function() {
             modal.style.display = 'none';
         }
     }
-    function showCheckBtn(){
-        var rows = document.getElementById('bookmarks_whole').querySelectorAll('tr');
-        rows.forEach(row => {
-            var button = document.createElement('input');
-            // button.textContent = '>';
-            button.setAttribute('type', 'checkbox'); // 체크박스로 설정
-            button.className = 'check_btn';
-            // button.onclick = showModal;
-            // button.onclick = function() {
-            //     // var bookmark = userBookmark[row.rowIndex - 1]; // Get the corresponding bookmark object
-            //     // showModal(bookmark, userBookmark); // Pass the 'bookmark' object as an argument
-            // };
-            row.cells[3].appendChild(button);
-        });
-
-    }
-    function deleteRow(checkbox) {
-        if (checkbox.checked) {
-            var row = checkbox.parentNode.parentNode;
-            row.parentNode.removeChild(row);
-        }
-    }
 
     // 삭제 및 추가 된 태그 정보를 서버로 전송하는 함수
     function updateTag(updatedTags){
@@ -381,24 +384,4 @@ window.onload = function() {
             console.error('Error:', error);
             })
     }
-
-    function deleteRow(checkbox) {
-        if (checkbox.checked) {
-            console.log("checked!")
-            var row = checkbox.parentNode.parentNode;
-            row.parentNode.removeChild(row);
-        }
-    }
-
-    
-}
-
-// $('.check_all').click(function(){ 
-//     console.log('check');
-//     if($("input:checkbox[id='check_btn']").prop("checked")){
-//         $("input[type=checkbox]").prop("checked",true);
-//     } else{
-//         $("input[type=checkbox]").prop("checked",true);
-//     }
-     
-// });
\ No newline at end of file
+});