diff --git a/src/components/background.svelte b/src/lib/components/background.svelte
similarity index 96%
rename from src/components/background.svelte
rename to src/lib/components/background.svelte
index 831fd7a..f569de8 100644
--- a/src/components/background.svelte
+++ b/src/lib/components/background.svelte
@@ -19,7 +19,7 @@
             localforage.getItem(`${coverId}-cover`, function (err, file) {
                 if (file) {
                     const path = URL.createObjectURL(file as File);
-                    processImage(16, 3, 96, path, canvas, (resultImageData: ImageData) => {
+                    processImage(16, 4, 96, path, canvas, (resultImageData: ImageData) => {
                         console.log(resultImageData);
                         localforage.setItem(
                             `${coverId}-cover-cache`,
diff --git a/src/components/base.svelte b/src/lib/components/base.svelte
similarity index 100%
rename from src/components/base.svelte
rename to src/lib/components/base.svelte
diff --git a/src/lib/components/cover.svelte b/src/lib/components/cover.svelte
new file mode 100644
index 0000000..91b966d
--- /dev/null
+++ b/src/lib/components/cover.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import localforage from '$lib/storage';
+    import { page } from '$app/stores';
+    export let coverId;
+
+    let coverPath = '';
+
+    localforage.getItem(`${coverId}-cover`, function (err, file) {
+        if (file) {
+            const path = URL.createObjectURL(file as File);
+            coverPath = path;
+        }
+    });
+</script>
+
+<img class="cover" src={coverPath} alt="封面" />
+
+<style>
+    .cover {
+        position: absolute;
+        z-index: 1;
+        min-height: 35vh;
+        max-height: 55vh;
+        width: 34vw;
+        object-fit: cover;
+        left: 10vw;
+        top: 40vh;
+        transform: translate(0, -50%);
+        border-radius: 1rem;
+        box-shadow: 0 0 1rem 0.5rem rgba(0, 0, 0, 0.1);
+    }
+</style>
diff --git a/src/components/import/addIcon.svelte b/src/lib/components/import/addIcon.svelte
similarity index 100%
rename from src/components/import/addIcon.svelte
rename to src/lib/components/import/addIcon.svelte
diff --git a/src/components/import/fileList.d.ts b/src/lib/components/import/fileList.d.ts
similarity index 100%
rename from src/components/import/fileList.d.ts
rename to src/lib/components/import/fileList.d.ts
diff --git a/src/components/import/fileList.svelte b/src/lib/components/import/fileList.svelte
similarity index 100%
rename from src/components/import/fileList.svelte
rename to src/lib/components/import/fileList.svelte
diff --git a/src/components/import/fileSelector.svelte b/src/lib/components/import/fileSelector.svelte
similarity index 100%
rename from src/components/import/fileSelector.svelte
rename to src/lib/components/import/fileSelector.svelte
diff --git a/src/components/import/importIcon.svelte b/src/lib/components/import/importIcon.svelte
similarity index 100%
rename from src/components/import/importIcon.svelte
rename to src/lib/components/import/importIcon.svelte
diff --git a/src/components/import/sourceCard.svelte b/src/lib/components/import/sourceCard.svelte
similarity index 100%
rename from src/components/import/sourceCard.svelte
rename to src/lib/components/import/sourceCard.svelte
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d02c9a7..e880dc4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import localforage from 'localforage';
-    import Background from '../components/background.svelte';
+    import Background from '$lib/components/background.svelte';
     let audioInput: any;
     let coverInput: any;
     const audioId = 'd5a2e306-ddea-4fc3-9927-c79dcb3a4071';
diff --git a/src/routes/import/+page.svelte b/src/routes/import/+page.svelte
index 6d40fa8..0ec5a65 100644
--- a/src/routes/import/+page.svelte
+++ b/src/routes/import/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import SourceCard from "../../components/import/sourceCard.svelte";
+    import SourceCard from "$lib/components/import/sourceCard.svelte";
 
 </script>
 
diff --git a/src/routes/import/local/+page.svelte b/src/routes/import/local/+page.svelte
index 033fb86..3824717 100644
--- a/src/routes/import/local/+page.svelte
+++ b/src/routes/import/local/+page.svelte
@@ -1,6 +1,6 @@
 <script>
-    import FileList from '../../../components/import/fileList.svelte';
-    import FileSelector from '../../../components/import/fileSelector.svelte';
+    import FileList from '$lib/components/import/fileList.svelte';
+    import FileSelector from '$lib/components/import/fileSelector.svelte';
     import { fileListState, finalFileListState } from '$lib/state/fileList.state';
     import { localImportFailed, localImportSuccess } from '$lib/state/localImportStatus.state';
     import { useAtom } from 'jotai-svelte';
diff --git a/src/routes/play/[id]/+page.svelte b/src/routes/play/[id]/+page.svelte
index 593388f..35fa179 100644
--- a/src/routes/play/[id]/+page.svelte
+++ b/src/routes/play/[id]/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import Background from '../../../components/background.svelte';
+    import Background from '$lib/components/background.svelte';
+    import Cover from '$lib/components/cover.svelte';
 
     const audioId = $page.params.id;
-
 </script>
 
 <Background coverId={audioId} />
+<Cover coverId={audioId}/>
\ No newline at end of file