diff --git a/packages/core/components/background.svelte b/packages/core/components/background.svelte
index 2ea787b..234d246 100644
--- a/packages/core/components/background.svelte
+++ b/packages/core/components/background.svelte
@@ -2,7 +2,7 @@
     import { processImage } from '@core/graphics';
     import blobToImageData from '@core/graphics/blob2imageData';
     import imageDataToBlob from '@core/graphics/imageData2blob';
-    import localforage from '$lib/utils/storage';
+    import localforage from '@core/utils/storage';
     export let coverId: string;
     let canvas: HTMLCanvasElement;
 
diff --git a/packages/core/components/database/songCard.svelte b/packages/core/components/database/songCard.svelte
index 6cae97b..501a358 100644
--- a/packages/core/components/database/songCard.svelte
+++ b/packages/core/components/database/songCard.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-    import formatDuration from "$lib/utils/formatDuration";
-    import { formatViews } from "$lib/utils/formatViews";
+    import formatDuration from "@core/utils/formatDuration";
+    import { formatViews } from "@core/utils/formatViews";
+    import { type MusicMetadata } from '@core/server/database/musicInfo';
 
     export let songData: MusicMetadata;
 </script>
diff --git a/packages/core/components/import/fileList.svelte b/packages/core/components/import/fileList.svelte
index ea0f424..a2a38fc 100644
--- a/packages/core/components/import/fileList.svelte
+++ b/packages/core/components/import/fileList.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
     import { useAtom } from 'jotai-svelte';
-    import { fileListState, finalFileListState } from '$lib/state/fileList.state';
-    import toHumanSize from '$lib/utils/humanSize';
-    import formatText from '$lib/utils/formatText';
-    import extractFileName from '$lib/utils/extractFileName';
-    import getAudioMeta from '$lib/utils/getAudioCoverURL';
-    import convertCoverData from '$lib/utils/convertCoverData';
+    import { fileListState, finalFileListState } from '@core/state/fileList.state';
+    import toHumanSize from '@core/utils/humanSize';
+    import formatText from '@core/utils/formatText';
+    import extractFileName from '@core/utils/extractFileName';
+    import getAudioMeta from '@core/utils/getAudioCoverURL';
+    import convertCoverData from '@core/utils/convertCoverData';
     import type { IAudioMetadata } from 'music-metadata-browser';
-    import formatDuration from '$lib/utils/formatDuration';
+    import formatDuration from '@core/utils/formatDuration';
     const items = useAtom(fileListState);
     const finalItems = useAtom(finalFileListState);
     let displayItems: any[] = [];
diff --git a/packages/core/components/import/fileSelector.svelte b/packages/core/components/import/fileSelector.svelte
index 0739632..f5eecd6 100644
--- a/packages/core/components/import/fileSelector.svelte
+++ b/packages/core/components/import/fileSelector.svelte
@@ -3,7 +3,7 @@
     import ImportIcon from './importIcon.svelte';
     import { onMount } from 'svelte';
     import { useAtom } from 'jotai-svelte';
-    import { fileListState } from '$lib/state/fileList.state';
+    import { fileListState } from '@core/state/fileList.state';
     import AddIcon from './addIcon.svelte';
     const fileItems = useAtom(fileListState);
     export let accept: string = ".aac, .mp3, .wav, .ogg, .flac";
diff --git a/packages/core/components/interactiveBox.svelte b/packages/core/components/interactiveBox.svelte
index 1b42261..843216d 100644
--- a/packages/core/components/interactiveBox.svelte
+++ b/packages/core/components/interactiveBox.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import formatDuration from '$lib/utils/formatDuration';
+    import formatDuration from '../utils/formatDuration';
     import { onMount } from 'svelte';
-    import userAdjustingProgress from '$lib/state/userAdjustingProgress';
-    import progressBarSlideValue from '$lib/state/progressBarSlideValue';
-    import truncate from '$lib/utils/truncate';
+    import userAdjustingProgress from '../state/userAdjustingProgress';
+    import progressBarSlideValue from '../state/progressBarSlideValue';
+    import truncate from '../utils/truncate';
 
     export let name: string;
     export let singer: string = '';
diff --git a/packages/core/postcss.config.js b/packages/core/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/packages/core/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/core/server/database/loadData.ts b/packages/core/server/database/loadData.ts
index ff5e610..681a545 100644
--- a/packages/core/server/database/loadData.ts
+++ b/packages/core/server/database/loadData.ts
@@ -1,5 +1,5 @@
 import fs from 'fs';
-import { globalMemoryStorage, songData, songNameCache } from '$lib/server/cache.js';
+import { globalMemoryStorage, songData, songNameCache } from '@core/server/cache.js';
 import { getDirectoryHash } from '../dirHash';
 import { safePath } from '../safePath';
 
diff --git a/packages/web/src/lib/state/fileList.state.ts b/packages/core/state/fileList.state.ts
similarity index 100%
rename from packages/web/src/lib/state/fileList.state.ts
rename to packages/core/state/fileList.state.ts
diff --git a/packages/web/src/lib/state/localImportStatus.state.ts b/packages/core/state/localImportStatus.state.ts
similarity index 100%
rename from packages/web/src/lib/state/localImportStatus.state.ts
rename to packages/core/state/localImportStatus.state.ts
diff --git a/packages/web/src/lib/state/nextUpdate.ts b/packages/core/state/nextUpdate.ts
similarity index 100%
rename from packages/web/src/lib/state/nextUpdate.ts
rename to packages/core/state/nextUpdate.ts
diff --git a/packages/web/src/lib/state/progressBarRaw.ts b/packages/core/state/progressBarRaw.ts
similarity index 100%
rename from packages/web/src/lib/state/progressBarRaw.ts
rename to packages/core/state/progressBarRaw.ts
diff --git a/packages/web/src/lib/state/progressBarSlideValue.ts b/packages/core/state/progressBarSlideValue.ts
similarity index 100%
rename from packages/web/src/lib/state/progressBarSlideValue.ts
rename to packages/core/state/progressBarSlideValue.ts
diff --git a/packages/web/src/lib/state/userAdjustingProgress.ts b/packages/core/state/userAdjustingProgress.ts
similarity index 100%
rename from packages/web/src/lib/state/userAdjustingProgress.ts
rename to packages/core/state/userAdjustingProgress.ts
diff --git a/packages/core/tailwind.config.js b/packages/core/tailwind.config.js
new file mode 100644
index 0000000..b995e01
--- /dev/null
+++ b/packages/core/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: ['./**/*.{html,js,svelte,ts}'],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}
\ No newline at end of file
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
new file mode 100644
index 0000000..f3e740d
--- /dev/null
+++ b/packages/core/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "extends": ["../../tsconfig.base.json"],
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@core/*": ["./*"]
+        },
+        "allowJs": true,
+        "checkJs": false,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "sourceMap": true,
+        "strict": true,
+        "types": ["bun"]
+    }
+}
diff --git a/packages/web/src/lib/ttml/index.ts b/packages/core/ttml/index.ts
similarity index 100%
rename from packages/web/src/lib/ttml/index.ts
rename to packages/core/ttml/index.ts
diff --git a/packages/web/src/lib/ttml/parser.ts b/packages/core/ttml/parser.ts
similarity index 100%
rename from packages/web/src/lib/ttml/parser.ts
rename to packages/core/ttml/parser.ts
diff --git a/packages/web/src/lib/ttml/ttml-types.ts b/packages/core/ttml/ttml-types.ts
similarity index 100%
rename from packages/web/src/lib/ttml/ttml-types.ts
rename to packages/core/ttml/ttml-types.ts
diff --git a/packages/web/src/lib/ttml/writer.ts b/packages/core/ttml/writer.ts
similarity index 100%
rename from packages/web/src/lib/ttml/writer.ts
rename to packages/core/ttml/writer.ts
diff --git a/packages/web/src/lib/utils/convertCoverData.ts b/packages/core/utils/convertCoverData.ts
similarity index 100%
rename from packages/web/src/lib/utils/convertCoverData.ts
rename to packages/core/utils/convertCoverData.ts
diff --git a/packages/web/src/lib/utils/extractFileName.ts b/packages/core/utils/extractFileName.ts
similarity index 100%
rename from packages/web/src/lib/utils/extractFileName.ts
rename to packages/core/utils/extractFileName.ts
diff --git a/packages/web/src/lib/utils/formatDuration.ts b/packages/core/utils/formatDuration.ts
similarity index 100%
rename from packages/web/src/lib/utils/formatDuration.ts
rename to packages/core/utils/formatDuration.ts
diff --git a/packages/web/src/lib/utils/formatText.ts b/packages/core/utils/formatText.ts
similarity index 100%
rename from packages/web/src/lib/utils/formatText.ts
rename to packages/core/utils/formatText.ts
diff --git a/packages/web/src/lib/utils/formatViews.ts b/packages/core/utils/formatViews.ts
similarity index 100%
rename from packages/web/src/lib/utils/formatViews.ts
rename to packages/core/utils/formatViews.ts
diff --git a/packages/web/src/lib/utils/getAudioCoverURL.ts b/packages/core/utils/getAudioCoverURL.ts
similarity index 100%
rename from packages/web/src/lib/utils/getAudioCoverURL.ts
rename to packages/core/utils/getAudioCoverURL.ts
diff --git a/packages/web/src/lib/utils/getVersion.ts b/packages/core/utils/getVersion.ts
similarity index 100%
rename from packages/web/src/lib/utils/getVersion.ts
rename to packages/core/utils/getVersion.ts
diff --git a/packages/web/src/lib/utils/humanSize.ts b/packages/core/utils/humanSize.ts
similarity index 100%
rename from packages/web/src/lib/utils/humanSize.ts
rename to packages/core/utils/humanSize.ts
diff --git a/packages/web/src/lib/utils/songUpdateTime.ts b/packages/core/utils/songUpdateTime.ts
similarity index 100%
rename from packages/web/src/lib/utils/songUpdateTime.ts
rename to packages/core/utils/songUpdateTime.ts
diff --git a/packages/web/src/lib/utils/storage.ts b/packages/core/utils/storage.ts
similarity index 100%
rename from packages/web/src/lib/utils/storage.ts
rename to packages/core/utils/storage.ts
diff --git a/packages/web/src/lib/utils/truncate.ts b/packages/core/utils/truncate.ts
similarity index 100%
rename from packages/web/src/lib/utils/truncate.ts
rename to packages/core/utils/truncate.ts
diff --git a/packages/web/src/routes/+page.svelte b/packages/web/src/routes/+page.svelte
index 0b7cfca..333fd71 100644
--- a/packages/web/src/routes/+page.svelte
+++ b/packages/web/src/routes/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import extractFileName from '$lib/utils/extractFileName';
-    import getVersion from '$lib/utils/getVersion';
-    import toHumanSize from '$lib/utils/humanSize';
-    import localforage from '$lib/utils/storage';
+    import extractFileName from '@core/utils/extractFileName';
+    import getVersion from '@core/utils/getVersion';
+    import toHumanSize from '@core/utils/humanSize';
+    import localforage from '@core/utils/storage';
     interface Song {
         name: string;
         singer?: string;
diff --git a/packages/web/src/routes/database/submit/+page.svelte b/packages/web/src/routes/database/submit/+page.svelte
index a9ef9e6..bc7196f 100644
--- a/packages/web/src/routes/database/submit/+page.svelte
+++ b/packages/web/src/routes/database/submit/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { getCurrentFormattedDateTime } from '$lib/utils/songUpdateTime';
+    import { getCurrentFormattedDateTime } from '@core/utils/songUpdateTime';
     import type { MusicMetadata } from '@core/server/database/musicInfo';
     let templateSongData: MusicMetadata = {
         id: '',
diff --git a/packages/web/src/routes/import/[id]/lyric/+page.svelte b/packages/web/src/routes/import/[id]/lyric/+page.svelte
index 2b151ac..3b4697d 100644
--- a/packages/web/src/routes/import/[id]/lyric/+page.svelte
+++ b/packages/web/src/routes/import/[id]/lyric/+page.svelte
@@ -2,8 +2,8 @@
     import { page } from '$app/stores';
     import FileList from '@core/components/import/fileList.svelte';
     import FileSelector from '@core/components/import/fileSelector.svelte';
-    import localforage from '$lib/utils/storage';
-    import { fileListState } from '$lib/state/fileList.state';
+    import localforage from '@core/utils/storage';
+    import { fileListState } from '@core/state/fileList.state';
     import { useAtom } from 'jotai-svelte';
     const fileList = useAtom(fileListState);
     const audioId = $page.params.id;
diff --git a/packages/web/src/routes/import/local/+page.svelte b/packages/web/src/routes/import/local/+page.svelte
index 7f0b348..5219df2 100644
--- a/packages/web/src/routes/import/local/+page.svelte
+++ b/packages/web/src/routes/import/local/+page.svelte
@@ -1,10 +1,10 @@
 <script>
     import FileList from '@core/components/import/fileList.svelte';
     import FileSelector from '@core/components/import/fileSelector.svelte';
-    import { fileListState, finalFileListState } from '$lib/state/fileList.state';
-    import { localImportFailed, localImportSuccess } from '$lib/state/localImportStatus.state';
+    import { fileListState, finalFileListState } from '@core/state/fileList.state';
+    import { localImportFailed, localImportSuccess } from '@core/state/localImportStatus.state';
     import { useAtom } from 'jotai-svelte';
-    import localforage from '$lib/utils/storage';
+    import localforage from '@core/utils/storage';
     import { v1 as uuidv1 } from 'uuid';
     const fileList = useAtom(fileListState);
     const finalFiles = useAtom(finalFileListState);
diff --git a/packages/web/src/routes/play/[id]/+page.svelte b/packages/web/src/routes/play/[id]/+page.svelte
index e31e03b..75e9600 100644
--- a/packages/web/src/routes/play/[id]/+page.svelte
+++ b/packages/web/src/routes/play/[id]/+page.svelte
@@ -4,15 +4,15 @@
     import Background from '@core/components/background.svelte';
     import Cover from '@core/components/cover.svelte';
     import InteractiveBox from '@core/components/interactiveBox.svelte';
-    import extractFileName from '$lib/utils/extractFileName';
+    import extractFileName from '@core/utils/extractFileName';
     import localforage from 'localforage';
     import { writable } from 'svelte/store';
     import lrcParser from '@core/lyrics/lrc/parser';
     import type { LrcJsonData } from '@core/lyrics/type';
-    import userAdjustingProgress from '$lib/state/userAdjustingProgress';
+    import userAdjustingProgress from '@core/state/userAdjustingProgress';
     import type { IAudioMetadata } from 'music-metadata-browser';
     import { onMount } from 'svelte';
-    import progressBarRaw from '$lib/state/progressBarRaw';
+    import progressBarRaw from '@core/state/progressBarRaw';
     import { parseTTML } from '@core/lyrics/ttml';
     import NewLyrics from '@core/components/lyrics/newLyrics.svelte';
 
@@ -213,8 +213,6 @@
 
 <NewLyrics {originalLyrics} progress={currentProgress} player={audioPlayer}/>
 
-<!-- <Lyrics lyrics={lyricsText} {originalLyrics} progress={currentProgress} player={audioPlayer} class="hidden" /> -->
-
 <audio
     bind:this={audioPlayer}
     controls
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index f81fe61..6bbf7fd 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-    content: ['./src/**/*.{html,js,svelte,ts}'],
+    content: ['./src/**/*.{html,js,svelte,ts}', '../../packages/core/components/**/*.{html,js,svelte,ts}'],
     theme: {
         extend: {},
     },