diff --git a/app/globals.css b/app/globals.css
index 495b7ce..9f05f4a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -178,8 +178,6 @@ body {
   position: relative;
   overflow: hidden;
   background: linear-gradient(var(--background), var(--background));
-  /* border-radius = border-parch-inner(padding + border-radius), we can also use variable, but im to lazy for that :))*/
-  border-radius: 1.15rem;
   z-index: 1;
   &:hover {
     transition: 0.5s;
@@ -189,13 +187,24 @@ body {
       animation-play-state: running;
     }
   }
+  @apply rounded-xl;
 }
 
 .border-parch-inner {
   overflow: hidden;
   background: linear-gradient(var(--background), var(--background));
   position: relative;
-  margin: 0.15rem;
+  margin: 0.05rem;
+  z-index: 1;
+  border-radius: 1rem;
+  @apply md:gap-6 gap-3;
+}
+
+.border-parch-inner-btn {
+  overflow: hidden;
+  background: linear-gradient(var(--background), var(--background));
+  position: relative;
+  margin: 0.1rem;
   z-index: 1;
   border-radius: 1rem;
   @apply md:gap-6 gap-3;
diff --git a/components/episode-cards.tsx b/components/episode-cards.tsx
index b5f0328..1b37c6c 100644
--- a/components/episode-cards.tsx
+++ b/components/episode-cards.tsx
@@ -74,45 +74,45 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
           {episodes.map((episode) => (
             <Card
               key={episode.id}
-              className="flex relative justify-center items-center cursor-pointer border-parch">
-             <div className="flex flex-col md:gap-6 gap-3 border-parch-inner">
-              <div className="aspect-video w-full overflow-hidden">
-                <Image
-                  src={episode.image || "/placeholder.svg"}
-                  alt={episode.title}
-                  width={200}
-                  height={200}
-                  className="h-full w-full object-cover transition-all hover:scale-105"
-                />
-              </div>
-              <CardHeader className="md:px-6 px-2">
-                <CardTitle className="text-sm md:text-base">
-                  {episode.title}
-                </CardTitle>
-                <CardDescription className="text-xs md:text-sm">
-                  {episode.date}
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="md:px-6 px-2 text-xs md:text-sm">
-                <p className="line-clamp-3 text-sm text-muted-foreground">
-                  {episode.description}
-                </p>
-              </CardContent>
-              <CardFooter className="flex items-center justify-between md:px-6 px-2">
-                <div className="flex items-center text-muted-foreground text-xs md:text-sm">
-                  <Clock className="ml-1 md:h-4 md:w-4 h-3.5 w-3.5" />
-                  {episode.duration}
+              className="border-0 flex relative justify-center items-center cursor-pointer border-parch"
+            >
+              <div className="flex flex-col md:gap-6 gap-3 border-parch-inner">
+                <div className="aspect-video w-full overflow-hidden">
+                  <Image
+                    src={episode.image || "/placeholder.svg"}
+                    alt={episode.title}
+                    width={200}
+                    height={200}
+                    className="h-full w-full object-cover transition-all hover:scale-105"
+                  />
                 </div>
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  className="gap-1 text-xs md:text-sm"
-                >
-                  پخش
-                  <Play className="md:h-4 md:w-4 h-3.5 w-3.5" />
-                </Button>
-              </CardFooter>
-
+                <CardHeader className="md:px-6 px-2">
+                  <CardTitle className="text-sm md:text-base">
+                    {episode.title}
+                  </CardTitle>
+                  <CardDescription className="text-xs md:text-sm">
+                    {episode.date}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="md:px-6 px-2 text-xs md:text-sm">
+                  <p className="line-clamp-3 text-sm text-muted-foreground">
+                    {episode.description}
+                  </p>
+                </CardContent>
+                <CardFooter className="flex items-center justify-between md:px-6 px-2">
+                  <div className="flex items-center text-muted-foreground text-xs md:text-sm">
+                    <Clock className="ml-1 md:h-4 md:w-4 h-3.5 w-3.5" />
+                    {episode.duration}
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="gap-1 text-xs md:text-sm"
+                  >
+                    پخش
+                    <Play className="md:h-4 md:w-4 h-3.5 w-3.5" />
+                  </Button>
+                </CardFooter>
               </div>
             </Card>
           ))}
diff --git a/components/podcast-hero.tsx b/components/podcast-hero.tsx
index 1ff9a6a..4d3d747 100644
--- a/components/podcast-hero.tsx
+++ b/components/podcast-hero.tsx
@@ -35,9 +35,9 @@ export function PodcastHero() {
             <div className="flex flex-col gap-2 min-[400px]:flex-row">
               <Button
                 size="lg"
-                className="border-parch [&::before]:!size-[12rem] cursor-pointer"
+                className="!rounded-md border-parch [&::before]:!size-[12rem] cursor-pointer"
               >
-                <div className="border-parch-inner !bg-white text-blue-parch flex items-center p-2 !text-black ![background:white]">
+                <div className="!rounded-md !gap-2.5 border-parch-inner-btn !bg-white text-blue-parch flex items-center p-2 !text-black ![background:white]">
                   <span>اکنون گوش کن</span>
                   <Play className="h-4 w-4" />
                 </div>