diff --git a/assets/template/index.html b/assets/template/index.html
index b438a0b..ad79b63 100644
--- a/assets/template/index.html
+++ b/assets/template/index.html
@@ -41,6 +41,25 @@
     </nav>
   </header>
 
+  <!-- A modal to rename file -->
+  <div class="modal" id="renameModal" tabindex="-1" aria-labelledby="renameModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-body bg-light">
+            <div class="mb-3">
+              <label for="new_name"><strong>Rename</strong></label>
+              <label for="new_name" class="col-form-label"></label>
+              <input type="text" class="form-control" id="new_name">
+            </div>
+        </div>
+        <div class="modal-footer bg-light">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="rename_btn()">Rename</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <main>
     <div class="container-fluid" style="margin-top:1em;">
       <ul class="nav nav-tabs" id="js_sucks" role="tablist">
@@ -107,6 +126,41 @@
     stab.addEventListener('shown.bs.tab', function (event) {
       active_tab = 1
     })
+
+
+    var renameModal = document.getElementById('renameModal')
+
+    renameModal.addEventListener('show.bs.modal', function (event) {
+      var button = event.relatedTarget // which button lunched this modal
+      var file = button.getAttribute('data-bs-whatever')
+      var modalTitle = renameModal.querySelector('.col-form-label')
+      modalTitle.textContent = file
+    })
+
+    function rename_btn() {
+      var modalTitle = renameModal.querySelector('.col-form-label')
+      var modalInput = renameModal.querySelector('.form-control')
+      var newName = modalInput.value.trim()
+
+      if (newName == "") {
+        console.log("New name is empty, ignore request")
+        return
+      }
+
+      path = "/rename/" + modalTitle.textContent + "/" + newName
+
+      let formData = new FormData()
+      formData.append('gorilla.csrf.Token', {{.csrfToken}})
+
+      fetch(path, {
+        method: "POST",
+        body: formData,
+      })
+      setTimeout(function () {
+        refresh(true)
+      }, 20);
+    }
+
   </script>
 
 </body>
diff --git a/assets/template/tab.html b/assets/template/tab.html
index 3cf283d..95b44f6 100644
--- a/assets/template/tab.html
+++ b/assets/template/tab.html
@@ -10,7 +10,7 @@
                     <u>{{.Id}}</u>
                 </p>
                 <a class="btn btn-outline-success btn-sm float-end" href="/view/{{.Id}}" target="_blank" role="button">
-                    <img src="/assets/img/view.svg" height="18px">
+                    <img src="/assets/img/view.svg" height="20px">
                 </a>
             </div>
         </div>
@@ -33,13 +33,18 @@
                 <div class="btn-toolbar float-end" role="toolbar" aria-label="records buttons">
                     <a class="btn btn-outline-success btn-sm m-1" href="/replay/{{.Fname}}" target="_blank"
                         role="button">
-                        <img src="/assets/img/play.svg" height="18px">
+                        <img src="/assets/img/play.svg" height="20px">
                     </a>
                     <a class="btn btn-outline-success btn-sm m-1" href="/records/{{.Fname}}" role="button" download>
-                        <img src="/assets/img/download.svg" height="18px">
+                        <img src="/assets/img/download.svg" height="20px">
                     </a>
+                    <!-- a button show the rename modal and pass data to it, do not change any data-bs- fields. 
+                    that is the magic of bootstrap framework -->
+                    <button type="button" class="btn btn-outline-success btn-sm m-1" data-bs-toggle="modal" data-bs-target="#renameModal" data-bs-whatever="{{.Fname}}" >
+                        <img src="/assets/img/edit.svg" height="20px">
+                    </button>
                     <button type="button" class="btn btn-outline-success btn-sm m-1" onclick="del_btn({{.Fname}})">
-                        <img src="/assets/img/delete.svg" height="18px">
+                        <img src="/assets/img/delete.svg" height="20px">
                     </button>
                 </div>
             </div>
diff --git a/web/record.go b/web/record.go
index c58cb0f..9e4266f 100644
--- a/web/record.go
+++ b/web/record.go
@@ -106,3 +106,21 @@ func delRec(c *gin.Context) {
 		log.Println("Failed to delete file,", err)
 	}
 }
+
+func renameRec(c *gin.Context) {
+	oldName := "./records/" + c.Param("oldname")
+	newName := "./records/" + c.Param("newname")
+
+	if !strings.HasSuffix(newName, ".scr") {
+		newName += ".scr"
+	}
+
+	if _, err := os.Stat(newName); err == nil {
+		log.Println(newName, "already exist, ignore the request")
+		return
+	}
+
+	if err := os.Rename(oldName, newName); err != nil {
+		log.Println("Failed to rename file,", err)
+	}
+}
diff --git a/web/routing.go b/web/routing.go
index 3e62132..89583ff 100644
--- a/web/routing.go
+++ b/web/routing.go
@@ -74,6 +74,8 @@ func StartWeb(fp *os.File, cmd []string, naked bool, port uint16) {
 
 	// delete a recording
 	g1.POST("/delete/:fname", delRec)
+	// Rename a recording
+	g1.POST("/rename/:oldname/:newname", renameRec)
 
 	term_conn.Init()
 	rt.RunTLS(":"+strconv.FormatUint(uint64(port), 10), "./tls/cert.pem", "./tls/private-key.pem")