diff --git a/src/app/[locale]/posts/[slug]/page.tsx b/src/app/[locale]/posts/[slug]/page.tsx
index 14c20c3b..93df75e0 100644
--- a/src/app/[locale]/posts/[slug]/page.tsx
+++ b/src/app/[locale]/posts/[slug]/page.tsx
@@ -106,10 +106,10 @@ export default async function PostPage({ params }: PostPageProps) {
 
   return (
     <div className="">
-      <div className="container w-full max-w-screen-2xl">
+      <div className="container w-full max-w-7xl">
         <div className="flex items-center justify-center pt-16 pb-4 sm:pt-36 sm:pb-12">
           <div className="relative flex flex-col items-center justify-center w-full">
-            <h1 className="text-center h1 text-4xl sm:text-5xl lg:text-6xl">{post.frontmatter.title}</h1>
+            <h1 className="text-center h1">{post.frontmatter.title}</h1>
             <Image
               src="/illustrations/underline.svg"
               alt={locale === 'de' ? 'Unterstrich' : 'Underline'}
@@ -122,9 +122,9 @@ export default async function PostPage({ params }: PostPageProps) {
       </div>
 
       <div className="lg:pb-48 sm:pb-32 pb-28">
-        <div className="container mt-12 w-full max-w-screen-2xl">
-          <div className="flex flex-col xl:flex-row gap-12 xl:gap-8">
-            <div className="flex-1 w-full space-y-8">
+        <div className="container mt-12 w-full">
+          <div className="flex flex-col-reverse xl:flex-row gap-12 xl:gap-8">
+            <div className="space-y-8">
               <div className="space-y-6 sm:space-y-5">
                 <div className="flex flex-wrap items-center gap-6 sm:gap-8">
                   <div className="flex items-center gap-2 text-purple">
@@ -135,9 +135,9 @@ export default async function PostPage({ params }: PostPageProps) {
                         clipRule="evenodd"
                       />
                     </svg>
-                    <time className="text-lg font-medium">{formattedDate}</time>
+                    <time className="text-base font-medium">{formattedDate}</time>
                   </div>
-                  <div className="flex items-center gap-2 text-purple">
+                  <div className="flex items-center gap-2 text-purple hover:text-purple-700 group">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
                       <path
                         fillRule="evenodd"
@@ -146,15 +146,15 @@ export default async function PostPage({ params }: PostPageProps) {
                       />
                     </svg>
                     {author?.link ? (
-                      <Link href={author.link} className="text-lg font-medium text-blue hover:text-purple transition-colors">
+                      <Link href={author.link} className="text-lg font-medium text-purple group-hover:text-purple-700 transition-colors">
                         {authorName}
                       </Link>
                     ) : (
-                      <span className="text-lg font-medium">{authorName}</span>
+                      <span className="text-base font-medium">{authorName}</span>
                     )}
                   </div>
                 </div>
-                <div className="flex flex-wrap items-center gap-4 mt-4 text-sm sm:text-base sm:mt-3 text-purple">
+                <div className="flex flex-wrap items-center gap-4 mt-4 text-sm sm:text-sm sm:mt-3 text-purple">
                   {post.frontmatter.categories?.map((category, index) => (
                     <p key={index}>#{category}</p>
                   ))}
@@ -176,8 +176,7 @@ export default async function PostPage({ params }: PostPageProps) {
               )}
 
               <div
-                className="text-blue prose prose-lg prose-a:text-purple-700 prose-code:bg-yellow prose-p:text-lg prose-p:leading-8 prose-blockquote:border-l-0 prose-blockquote:bg-green-100 prose-blockquote:not-italic prose-blockquote:px-8 prose-blockquote:py-3 prose-blockquote:rounded-3xl relative"
-                style={{ maxWidth: '100%' }}
+                className="text-blue sm:prose-base prose prose-sm prose-pre:prose-code:text-sm prose-ul:marker:text-blue prose-a:text-purple-700 prose-pre:prose-code:bg-transparent prose-code:bg-yellow prose-p:sm:leading-7 prose-blockquote:border-l-0 prose-blockquote:bg-green-100 prose-blockquote:not-italic prose-blockquote:px-8 prose-blockquote:py-3 prose-blockquote:rounded-3xl relative"
                 dangerouslySetInnerHTML={{ __html: post.contentHtml || '' }}
               />
             </div>
@@ -186,18 +185,17 @@ export default async function PostPage({ params }: PostPageProps) {
               <aside className="w-full xl:max-w-sm shrink-0">
                 <div className="rounded-[30px] w-full shadow-4 bg-white xl:p-5 p-4 xl:block md:flex lg:items-center">
                   {author.picture && (
-                    <div className="relative lg:w-40 md:w-48 sm:w-40 w-28 h-28 md:h-auto lg:h-40 shrink-0 overflow-hidden rounded-3xl bg-gray-100 xl:float-left md:float-none float-left xl:mr-6 mr-4">
+                    <div className="relative lg:size-40 md:size-44 sm:size-36 size-28 shrink-0 overflow-hidden rounded-3xl bg-gray-100 xl:float-left md:float-none float-left xl:mr-6 mr-4">
                       <Image
                         src={author.picture}
                         alt={authorName}
                         fill
-                        sizes="(max-width: 640px) 112px, (max-width: 1024px) 160px, 192px"
-                        className="object-cover"
+                        className="object-cover sm:size-28 xl:size-40 md:size-56"
                       />
                     </div>
                   )}
                   <div>
-                    <h4 className="mb-2 text-xl font-bold">
+                    <h4 className="mb-2 text-lg font-bold">
                       {author.link ? (
                         <Link href={author.link} className="hover:text-purple transition-colors">
                           {authorName}
@@ -207,7 +205,7 @@ export default async function PostPage({ params }: PostPageProps) {
                       )}
                     </h4>
                     {author.bio && (
-                      <p className="text-base leading-7">
+                      <p className="text-sm leading-6 text-blue">
                         {author.bio}
                       </p>
                     )}
diff --git a/src/app/[locale]/posts/page.tsx b/src/app/[locale]/posts/page.tsx
index 9768189b..9adea965 100644
--- a/src/app/[locale]/posts/page.tsx
+++ b/src/app/[locale]/posts/page.tsx
@@ -50,7 +50,7 @@ export default async function BlogPage({ params, searchParams }: BlogPageProps)
       <Image
         src="/illustrations/blog-arrow.svg"
         alt=""
-        className="absolute w-32 sm:w-64 2xl:w-96 lg:w-80 2xl:left-32 xl:left-9 lg:top-36 sm:top-28 top-12 shrink-0"
+        className="absolute w-32 sm:w-64 2xl:w-96 lg:w-80  xl:left-9 lg:top-36 sm:top-28 top-12 shrink-0"
         width={384}
         height={100}
       />
diff --git a/src/app/globals.css b/src/app/globals.css
index df698f6a..1a312f65 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -93,9 +93,14 @@
     background-color: var(--color-white);
   } */
 
-  p {
+  /* p {
     padding-top: 0.8em;
+  } */
+
+  .prose > iframe{
+    @apply w-full xl:min-h-103.5 lg:min-h-130 md:min-h-96 sm:min-h-81 h-46
   }
+
 }
 
 @layer utilities {
diff --git a/src/components/blog/BlogCard.tsx b/src/components/blog/BlogCard.tsx
index d8a43a28..8992a4ac 100644
--- a/src/components/blog/BlogCard.tsx
+++ b/src/components/blog/BlogCard.tsx
@@ -67,7 +67,7 @@ export default function BlogCard({ post, locale = 'en' }: BlogCardProps) {
                   <h2 className="text-lg font-bold text-center transition-colors duration-150 ease-in-out text-blue sm:text-left sm:line-clamp-none line-clamp-2 group-hover:text-purple-700">
                     {post.title}
                   </h2>
-                  <p className="text-sm leading-[22px] text-blue line-clamp-3">
+                  <p className="text-sm leading-5.5 text-blue line-clamp-3">
                     {post.excerpt}
                   </p>
                 </div>
diff --git a/src/components/blog/BlogPagination.tsx b/src/components/blog/BlogPagination.tsx
index cf4932cb..a3f4c979 100644
--- a/src/components/blog/BlogPagination.tsx
+++ b/src/components/blog/BlogPagination.tsx
@@ -25,18 +25,20 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
   const visiblePages = getVisiblePages();
 
   return (
-    <div className="flex items-center justify-center gap-2 mt-12">
+    <div className="flex items-center justify-center gap-7 mt-12">
       {/* Previous Button */}
       {currentPage > 1 ? (
         <Link
           href={`${localePath}/posts?page=${currentPage - 1}`}
-          className="px-4 py-2 text-sm font-medium text-blue bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-purple transition-colors"
+          className="inline-flex items-center justify-center text-white bg-purple-700 rounded-full sm:w-16 sm:h-16 w-11 h-11 text-whit shrink-0 page-link"
         >
-          {locale === 'de' ? 'Zurück' : 'Previous'}
+          <span className="sr-only">{locale === 'de' ? 'Zurück' : 'Previous'}</span>
+          <svg className="size-5 -ml-0.5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
         </Link>
       ) : (
-        <span className="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-200 rounded-lg cursor-not-allowed">
-          {locale === 'de' ? 'Zurück' : 'Previous'}
+        <span className="inline-flex items-center justify-center text-white bg-purple-100 rounded-full sm:w-16 sm:h-16 w-11 h-11 text-whit shrink-0 page-link cursor-not-allowed">
+          <span className="sr-only">{locale === 'de' ? 'Zurück' : 'Previous'}</span>
+          <svg className="size-5 -ml-0.5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
         </span>
       )}
 
@@ -60,7 +62,7 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
         page === currentPage ? (
           <span
             key={page}
-            className="px-4 py-2 text-sm font-medium bg-purple text-white rounded-lg shadow-md"
+            className="inline-flex items-center justify-center size-11 text-white rounded-full bg-green font-medium text-sm page-link"
           >
             {page}
           </span>
@@ -68,7 +70,7 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
           <Link
             key={page}
             href={`${localePath}/posts?page=${page}`}
-            className="px-4 py-2 text-sm font-medium text-blue bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-purple transition-colors"
+            className="inline-flex items-center justify-center w-5 h-11 text-blue rounded-full font-medium text-[14px] page-link"
           >
             {page}
           </Link>
@@ -79,7 +81,7 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
       {visiblePages[visiblePages.length - 1] < totalPages && (
         <>
           {visiblePages[visiblePages.length - 1] < totalPages - 1 && (
-            <span className="px-2 text-gray-400">...</span>
+            <span className="inline-flex items-center justify-center w-5 h-11 text-blue rounded-full font-medium text-[14px] page-link">...</span>
           )}
           <Link
             href={`${localePath}/posts?page=${totalPages}`}
@@ -94,13 +96,15 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
       {currentPage < totalPages ? (
         <Link
           href={`${localePath}/posts?page=${currentPage + 1}`}
-          className="px-4 py-2 text-sm font-medium text-blue bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-purple transition-colors"
+          className="inline-flex items-center justify-center text-white bg-purple-700 rounded-full sm:w-16 sm:h-16 w-11 h-11 text-whit shrink-0 page-link"
         >
-          {locale === 'de' ? 'Weiter' : 'Next'}
+          <span className="sr-only">{locale === 'de' ? 'Weiter' : 'Next'}</span>
+          <svg className="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path></svg>
         </Link>
       ) : (
-        <span className="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-200 rounded-lg cursor-not-allowed">
-          {locale === 'de' ? 'Weiter' : 'Next'}
+        <span className="inline-flex items-center justify-center text-white bg-purple-100 rounded-full sm:w-16 sm:h-16 w-11 h-11 text-whit shrink-0 page-link cursor-not-allowed">
+          <span className="sr-only">{locale === 'de' ? 'Weiter' : 'Next'}</span>
+          <svg className="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path></svg>
         </span>
       )}
     </div>
diff --git a/src/components/contact/CalendlyButton.tsx b/src/components/contact/CalendlyButton.tsx
index 1f378c5d..29168c69 100644
--- a/src/components/contact/CalendlyButton.tsx
+++ b/src/components/contact/CalendlyButton.tsx
@@ -12,7 +12,7 @@ export default function CalendlyButton() {
   }
 
   return (
-    <div className="max-w-[1080px] w-full pt-3 mx-auto">
+    <div className="max-w-270 w-full pt-3 mx-auto">
       <div className="bg-sky-100 rounded-[28px] border-2 border-dashed border-sky p-6 w-full flex flex-col items-center justify-center text-center">
         <p>
           {t('description')}