diff --git a/src/containers/case-detail/sidebar/index.tsx b/src/containers/case-detail/sidebar/index.tsx
index bc2a910..bb61675 100644
--- a/src/containers/case-detail/sidebar/index.tsx
+++ b/src/containers/case-detail/sidebar/index.tsx
@@ -114,8 +114,8 @@ export default function CaseDetailSidebar() {
         <Media greaterThanOrEqual="md">
           {(className: string, renderChildren: boolean) =>
             renderChildren ? (
-              <Button asChild variant="ghost" className="border border-grey-900">
-                <Link href="/cases">Close detail</Link>
+              <Button asChild variant="secondary" className="border border-grey-900 text-white">
+                <Link href="/cases">Back</Link>
               </Button>
             ) : (
               <Button
diff --git a/src/containers/cases/header/index.tsx b/src/containers/cases/header/index.tsx
index cc3e35a..048e484 100644
--- a/src/containers/cases/header/index.tsx
+++ b/src/containers/cases/header/index.tsx
@@ -12,7 +12,7 @@ export default function Header() {
   const { id } = useParams();
 
   return (
-    <header className="flex items-center justify-between border-b border-b-grey-400 px-4 py-2 md:px-[60px] md:py-4">
+    <header className="flex items-center justify-between border-b border-b-grey-400 px-4 py-2 md:px-[60px] md:py-5">
       <AppLogo variant="secondary" />
       <Media greaterThanOrEqual="md">{!id && <CaseFilters />}</Media>
       <AppMenu />
diff --git a/src/containers/cases/total/index.tsx b/src/containers/cases/total/index.tsx
index db14a60..aceb083 100644
--- a/src/containers/cases/total/index.tsx
+++ b/src/containers/cases/total/index.tsx
@@ -27,7 +27,7 @@ export default function CaseStudiesTotal({
 
   return (
     <div className={className}>
-      <div className="space-y-4 bg-white py-8">
+      <div className="space-y-4 bg-white py-7">
         <h4 className="text-[length:inherit] font-bold">Case studies</h4>
         <p className="text-lg text-gray-600">{totalCaseStudies} case studies</p>
       </div>
diff --git a/src/containers/home/thematic-areas/index.tsx b/src/containers/home/thematic-areas/index.tsx
index e21bc78..9f1113d 100644
--- a/src/containers/home/thematic-areas/index.tsx
+++ b/src/containers/home/thematic-areas/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useState } from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -15,6 +15,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@/components/ui/accordion';
+import { Separator } from '@/components/ui/separator';
 import Wrapper from '@/components/ui/wrapper';
 
 const IconBackground = ({
@@ -68,59 +69,91 @@ const THEMATIC_AREAS = [
 ];
 
 export default function ThematicAreas() {
+  const [openAccordionItem, setOpenAccordionItem] = useState<string | null>(null);
   return (
-    <Wrapper className="space-y-10 md:space-y-20">
-      <div className="grid grid-cols-12">
-        <div className="col-span-12 space-y-9 lg:col-span-6">
-          <h2 className="text-xl font-bold text-grey-800 md:text-2xl">Thematic areas</h2>
-          <p className="leading-9 md:text-lg">
-            The more4nature activities are focused on three key thematic areas in environmental
-            protection:
-          </p>
+    <>
+      <Wrapper className="space-y-10 md:space-y-20">
+        <div className="grid grid-cols-12">
+          <div className="col-span-12 space-y-9 lg:col-span-6">
+            <h2 className="text-xl font-bold text-grey-800 md:text-2xl">Thematic areas</h2>
+            <p className="leading-9 md:text-lg">
+              The more4nature activities are focused on three key thematic areas in environmental
+              protection:
+            </p>
+          </div>
         </div>
-      </div>
-      <Media lessThan="lg">
-        <ul className="space-y-10 divide-y divide-grey-800/20">
-          {THEMATIC_AREAS.map(({ name, description, imageURL, icon }) => (
-            <li key={name} className="flex flex-col space-y-4 [&:not(:first-child)]:pt-10">
-              <div
-                className="flex h-[110px] w-full bg-cover bg-center bg-no-repeat"
-                style={{
-                  backgroundImage: `url(${imageURL})`,
-                }}
-              />
-              <div className="flex items-center space-x-5">
-                {icon}
-                <span className="text-lg">{name}</span>
-              </div>
-              <p>{description}</p>
-            </li>
-          ))}
-        </ul>
-      </Media>
+        <Media lessThan="lg">
+          <ul className="space-y-10 divide-y divide-grey-800/20">
+            {THEMATIC_AREAS.map(({ name, description, imageURL, icon }) => (
+              <li key={name} className="flex flex-col space-y-4 [&:not(:first-child)]:pt-10">
+                <div
+                  className="flex h-[110px] w-full bg-cover bg-center bg-no-repeat"
+                  style={{
+                    backgroundImage: `url(${imageURL})`,
+                  }}
+                />
+                <div className="flex items-center space-x-5">
+                  {icon}
+                  <span className="text-lg">{name}</span>
+                </div>
+                <p>{description}</p>
+              </li>
+            ))}
+          </ul>
+        </Media>
+        <Media greaterThanOrEqual="lg">
+          <Accordion
+            type="single"
+            collapsible
+            className="flex w-full flex-col"
+            onValueChange={(v) => setOpenAccordionItem(v || null)}
+          >
+            {THEMATIC_AREAS.map(({ name, description, imageURL, icon }) => {
+              const isFadedAccordionItem = openAccordionItem && name !== openAccordionItem;
+              const isOpenAccordionItem = openAccordionItem && name === openAccordionItem;
+              return (
+                <div
+                  key={name}
+                  className="flex h-full w-full flex-1 flex-row-reverse border-b-grey-800/30 last-of-type:border-b"
+                >
+                  <AccordionItem
+                    key={name}
+                    value={name}
+                    className={cn({
+                      'peer w-full px-14 py-10': true,
+                      'border-t-2': isOpenAccordionItem,
+                    })}
+                  >
+                    <AccordionTrigger>
+                      <div className="flex flex-1 items-center space-x-5">
+                        {icon}
+                        <span className="text-left text-4xl">{name}</span>
+                      </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="leading-9">{description}</AccordionContent>
+                  </AccordionItem>
+                  <div
+                    className={cn({
+                      'relative flex w-[395px] border-t border-t-grey-800/30 bg-cover bg-center bg-no-repeat transition-opacity duration-300':
+                        true,
+                      'bg-gray-400 opacity-40 bg-blend-multiply': isFadedAccordionItem,
+                      'border-t-2 border-t-grey-800': isOpenAccordionItem,
+                    })}
+                    style={{
+                      backgroundImage: isFadedAccordionItem
+                        ? `linear-gradient(0deg, rgba(36, 59, 74, 0.20) 0%, rgba(36, 59, 74, 0.20) 100%), url(${imageURL})`
+                        : `url(${imageURL})`,
+                    }}
+                  />
+                </div>
+              );
+            })}
+          </Accordion>
+        </Media>
+      </Wrapper>
       <Media greaterThanOrEqual="lg">
-        <Accordion type="single" collapsible className="flex w-full flex-col">
-          {THEMATIC_AREAS.map(({ name, description, imageURL, icon }) => (
-            <div key={name} className="flex h-full w-full flex-1 flex-row-reverse">
-              <AccordionItem key={name} value={name} className="peer w-full px-14 py-10">
-                <AccordionTrigger>
-                  <div className="flex flex-1 items-center space-x-5">
-                    {icon}
-                    <span className="text-left text-4xl">{name}</span>
-                  </div>
-                </AccordionTrigger>
-                <AccordionContent className="leading-9">{description}</AccordionContent>
-              </AccordionItem>
-              <div
-                className="flex w-[395px] bg-cover bg-center bg-no-repeat"
-                style={{
-                  backgroundImage: `url(${imageURL})`,
-                }}
-              />
-            </div>
-          ))}
-        </Accordion>
+        <Separator className="mb-16 mt-12 bg-grey-800/30" />
       </Media>
-    </Wrapper>
+    </>
   );
 }