diff --git a/packages/app/src/pages/music/tabs/radio/index.jsx b/packages/app/src/pages/music/tabs/radio/index.jsx
index 1cde55a9..f9264907 100644
--- a/packages/app/src/pages/music/tabs/radio/index.jsx
+++ b/packages/app/src/pages/music/tabs/radio/index.jsx
@@ -7,8 +7,8 @@ import { MdPlayCircle, MdHeadphones } from "react-icons/md"
 
 import "./index.less"
 
-const RadioItem = ({ item }) => {
-	const start = () => {
+const RadioItem = ({ item, style }) => {
+	const onClickItem = () => {
 		app.cores.player.start(
 			{
 				title: item.name,
@@ -21,11 +21,21 @@ const RadioItem = ({ item }) => {
 		)
 	}
 
+	if (!item) {
+		return (
+			<div className="radio-list-item empty" style={style}>
+				<div className="radio-list-item-content">
+					<Skeleton />
+				</div>
+			</div>
+		)
+	}
+
 	return (
-		<div className="radio-list-item" onClick={start}>
+		<div className="radio-list-item" onClick={onClickItem} style={style}>
 			<Image className="radio-list-item-cover" src={item.background} />
 			<div className="radio-list-item-content">
-				<h1>{item.name}</h1>
+				<h1 id="title">{item.name}</h1>
 				<p>{item.description}</p>
 
 				<div className="radio-list-item-info">
@@ -61,6 +71,10 @@ const RadioTab = () => {
 			{R_Radios.map((item) => (
 				<RadioItem key={item.id} item={item} />
 			))}
+
+			<RadioItem style={{ opacity: 0.5 }} />
+			<RadioItem style={{ opacity: 0.4 }} />
+			<RadioItem style={{ opacity: 0.3 }} />
 		</div>
 	)
 }
diff --git a/packages/app/src/pages/music/tabs/radio/index.less b/packages/app/src/pages/music/tabs/radio/index.less
index 667b4bd0..bf83d6ea 100644
--- a/packages/app/src/pages/music/tabs/radio/index.less
+++ b/packages/app/src/pages/music/tabs/radio/index.less
@@ -1,11 +1,12 @@
+@min-item-width: 250px;
+@min-item-height: 150px;
+
 .radio-list {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(@min-item-width, 1fr));
 	gap: 10px;
 
 	width: 100%;
-
-	gap: 20px;
 }
 
 .radio-list-item {
@@ -14,8 +15,8 @@
 	display: flex;
 	flex-direction: column;
 
-	height: 160px;
-	width: 100%;
+	min-width: @min-item-width;
+	min-height: @min-item-height;
 
 	border-radius: 16px;
 	background-color: var(--background-color-accent);
@@ -24,6 +25,14 @@
 
 	&:hover {
 		cursor: pointer;
+
+		.radio-list-item-content {
+			backdrop-filter: blur(2px);
+		}
+	}
+
+	&.empty {
+		cursor: default;
 	}
 
 	.lazy-load-image-background,
@@ -37,6 +46,10 @@
 
 		width: 100%;
 		height: 100%;
+
+		img {
+			object-fit: cover;
+		}
 	}
 
 	.radio-list-item-content {
@@ -51,10 +64,10 @@
 		width: 100%;
 		height: 100%;
 
-		backdrop-filter: blur(2px);
-
 		padding: 16px;
 
+		transition: all 150ms ease-in-out;
+
 		.radio-list-item-info {
 			display: flex;
 			align-items: center;