diff --git a/internal/pkg/api/api.go b/internal/pkg/api/api.go
index 5ca8ed0..9fc7fa1 100644
--- a/internal/pkg/api/api.go
+++ b/internal/pkg/api/api.go
@@ -315,6 +315,36 @@ type GetFileRequest struct {
 	ID int64 `json:"id"`
 }
 
+func (api *API) HandleGetFileInfo(w http.ResponseWriter, r *http.Request) {
+	getFileRequest := &GetFileRequest{
+		ID: -1,
+	}
+
+	err := json.NewDecoder(r.Body).Decode(getFileRequest)
+	if err != nil {
+		api.HandleError(w, r, err)
+		return
+	}
+
+	// check empty
+	if getFileRequest.ID < 0 {
+		api.HandleErrorString(w, r, `"id" can't be none or negative`)
+		return
+	}
+
+	file, err := api.Db.GetFile(getFileRequest.ID)
+	if err != nil {
+		api.HandleError(w, r, err)
+		return
+	}
+
+	err = json.NewEncoder(w).Encode(file)
+	if err != nil {
+		api.HandleError(w, r, err)
+		return
+	}
+}
+
 func (api *API) HandleGetFileStream(w http.ResponseWriter, r *http.Request) {
 	q := r.URL.Query()
 	ids := q["id"]
@@ -396,23 +426,23 @@ func (api *API) HandleGetFileDirect(w http.ResponseWriter, r *http.Request) {
 }
 
 func (api *API) HandleGetFile(w http.ResponseWriter, r *http.Request) {
-	getFilesRequest := &GetFileRequest{
+	getFileRequest := &GetFileRequest{
 		ID: -1,
 	}
 
-	err := json.NewDecoder(r.Body).Decode(getFilesRequest)
+	err := json.NewDecoder(r.Body).Decode(getFileRequest)
 	if err != nil {
 		api.HandleError(w, r, err)
 		return
 	}
 
 	// check empty
-	if getFilesRequest.ID < 0 {
+	if getFileRequest.ID < 0 {
 		api.HandleErrorString(w, r, `"id" can't be none or negative`)
 		return
 	}
 
-	file, err := api.Db.GetFile(getFilesRequest.ID)
+	file, err := api.Db.GetFile(getFileRequest.ID)
 	if err != nil {
 		api.HandleError(w, r, err)
 		return
@@ -554,6 +584,7 @@ func NewAPI(apiConfig APIConfig) (*API, error) {
 	apiMux.HandleFunc("/get_file_stream", api.HandleGetFileStream)
 	apiMux.HandleFunc("/get_ffmpeg_config_list", api.HandleGetFfmpegConfigs)
 	apiMux.HandleFunc("/feedback", api.HandleFeedback)
+	apiMux.HandleFunc("/get_file_info", api.HandleGetFileInfo)
 	// below needs token
 	apiMux.HandleFunc("/walk", api.HandleWalk)
 	apiMux.HandleFunc("/reset", api.HandleReset)
diff --git a/web/index.js b/web/index.js
index 51bbc58..278898e 100644
--- a/web/index.js
+++ b/web/index.js
@@ -1,3 +1,53 @@
+const component_share = {
+	emits: ['play_audio', 'set_token'],
+	props: ['token'],
+	template: `
+<div class="page">
+<h3>Share with others!</h3>
+<p>Share link: <a :href="computed_share_link">{{ computed_share_link }}</a></p>
+<table>
+<thead>
+<tr>
+	<th>Filename</th>
+	<th>Folder Name</th>
+	<th>Size</th>
+	<th>Action</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+	<component-file :file=file @play_audio="$emit('play_audio', $event)"></component-file>
+</tr>
+</tbody>
+</table>
+</div>
+`,
+	computed: {
+		computed_share_link() {
+			return window.location.href
+		},
+	},
+	data() {
+		return {
+			file: {},
+		}
+	},
+	mounted() {
+		if (this.$route.query.id) {
+			this.get_file_info()
+		}
+	},
+	methods: {
+		get_file_info() {
+			axios.post('/api/v1/get_file_info', {
+				id: parseInt(this.$route.query.id),
+			}).then((response) => {
+				this.file = response.data
+			})
+		},
+	},
+}
+
 const component_search_folders = {
 	emits: ['play_audio', 'set_token'],
 	props: ['token'],
@@ -288,6 +338,7 @@ const component_file_dialog = {
 	<button @click="download_file(file)" :disabled="disabled">{{ computed_download_status }}</button>
 	<button @click="emit_play_audio">Play</button>
 	<button @click="emit_stream_audio">Stream</button>
+	<button @click="share">Share</button>
 	<button @click="emit_close_dialog">Close</button>
 </dialog>
 	`,
@@ -298,6 +349,14 @@ const component_file_dialog = {
 		}
 	},
 	methods: {
+		share() {
+			this.$router.push({
+				path: '/share',
+				query: {
+					id: this.file.id,
+				},
+			})
+		},
 		emit_close_dialog() {
 			this.$emit('close_dialog')
 		},
@@ -387,7 +446,7 @@ const component_file = {
 				path: '/search_folders',
 				query: {
 					folder_id: this.file.folder_id,
-				}
+				},
 			})
 		},
 		close_dialog() {
@@ -655,6 +714,7 @@ const routes = [
 	{ path: '/search_files', component: component_search_files},
 	{ path: '/search_folders', component: component_search_folders},
 	{ path: '/manage', component: component_manage},
+	{ path: '/share', component: component_share},
 ]
 const router = VueRouter.createRouter({
 	history: VueRouter.createWebHashHistory(),
@@ -689,6 +749,7 @@ app.component('component-file-dialog', component_file_dialog)
 app.component('component-token', component_token)
 app.component('component-stream-config', component_stream_config)
 app.component('component-manage-database', component_manage_database)
+app.component('component-share', component_share)
 
 app.use(router)