diff --git a/src/app.scss b/src/lib/app.scss
similarity index 93%
rename from src/app.scss
rename to src/lib/app.scss
index 809e4f5..e367def 100644
--- a/src/app.scss
+++ b/src/lib/app.scss
@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../variables.scss';
 
 @font-face {
   font-family: 'ZenKakuGothicNew-Regular';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9b79363..a683fad 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import '../app.scss';
+  import '$lib/app.scss';
 </script>
 
 <slot />
\ No newline at end of file
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index cc18ebd..ebb36da 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -29,11 +29,11 @@ export const load: PageServerLoad = async ({ params }) => {
       title: row.title,
       image: row.image,
       date: row.updated_at.toISOString().slice(0, 10),
-      link: `/post/${row.category}/${row.id}`,
+      link: `/article/${row.category}/${row.id}`,
       tags: row.tags,
     }));
-    const tags = await db.query("SELECT * FROM tag ORDER BY ref_count DESC");
-    data.tags = tags.rows.map((row) => row.name + ":" + row.ref_count);
+    const tags = await db.query("SELECT * FROM tag ORDER BY ref_count DESC LIMIT 20");
+    data.tags = tags.rows.map((row) => row.name);
   } catch (e) {
     await db.rollback();
     throw error(500, e as Error);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a3ad380..8a678be 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -306,10 +306,15 @@
 		.tags {
 			ul {
 				display: flex;
+        flex-wrap: wrap;
+        justify-content: left;
+        flex-direction: row;
 				gap: 3px;
 				li {
 					font-size: 1rem;
 					padding: 3px 5px;
+          border: 1px solid var(--line-primary);
+          border-radius: 5px;
 				}
 			}
 		}
diff --git a/src/routes/article/+layout.svelte b/src/routes/article/+layout.svelte
new file mode 100644
index 0000000..a683fad
--- /dev/null
+++ b/src/routes/article/+layout.svelte
@@ -0,0 +1,5 @@
+<script>
+  import '$lib/app.scss';
+</script>
+
+<slot />
\ No newline at end of file
diff --git a/src/routes/articles/+page.svelte b/src/routes/article/+page.svelte
similarity index 100%
rename from src/routes/articles/+page.svelte
rename to src/routes/article/+page.svelte
diff --git a/src/routes/articles/[category]/[id]/+page.server.ts b/src/routes/article/[category]/[id]/+page.server.ts
similarity index 100%
rename from src/routes/articles/[category]/[id]/+page.server.ts
rename to src/routes/article/[category]/[id]/+page.server.ts
diff --git a/src/routes/articles/[category]/[id]/+page.svelte b/src/routes/article/[category]/[id]/+page.svelte
similarity index 100%
rename from src/routes/articles/[category]/[id]/+page.svelte
rename to src/routes/article/[category]/[id]/+page.svelte
diff --git a/src/routes/articles/[id]/+page.server.ts b/src/routes/article/[id]/+page.server.ts
similarity index 100%
rename from src/routes/articles/[id]/+page.server.ts
rename to src/routes/article/[id]/+page.server.ts
diff --git a/src/routes/articles/[id]/+page.svelte b/src/routes/article/[id]/+page.svelte
similarity index 100%
rename from src/routes/articles/[id]/+page.svelte
rename to src/routes/article/[id]/+page.svelte
diff --git a/src/routes/articles/+layout.svelte b/src/routes/articles/+layout.svelte
deleted file mode 100644
index 9b79363..0000000
--- a/src/routes/articles/+layout.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import '../app.scss';
-</script>
-
-<slot />
\ No newline at end of file
diff --git a/src/variables.scss b/src/variables.scss
index 9f4688c..502cbd5 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -1,5 +1,6 @@
 :root {
-  --background-primary: #343434;
-  --line-primary: rgba(255, 255, 255, 0.1);
+  --background-primary: #1b1b1b;
+  --line-primary: rgba(255, 255, 255, 0.2);
+  --line-secondary: rgba(255, 255, 255, 0.1);
   --highlight-primary: rgba(255, 115, 0, 0.2);
 }