diff --git a/content/faq/Hva-er-MC/metadata.ini b/content/faq/Hva-er-MC/metadata.ini
new file mode 100644
index 0000000..7dc996d
--- /dev/null
+++ b/content/faq/Hva-er-MC/metadata.ini
@@ -0,0 +1 @@
+summary = "Medisinsk cannabis er en medikamentgruppe med 19 ulike varianter tilgjengelig i Norge. Medikamentene inneholder virkestoffer som THC og CBD som virker på det endocannabinoide systemet i kroppen, og kan tilpasses individuelt til hver pasient."
diff --git a/content/faq/metadata.ini b/content/faq/metadata.ini
index 9a9093c..31cdf1e 100644
--- a/content/faq/metadata.ini
+++ b/content/faq/metadata.ini
@@ -1,4 +1,4 @@
 menu = true
 title = "FAQ"
-page_template = list-card-grid
+page_template = list-faq
 show_date = false
\ No newline at end of file
diff --git a/content/faq/resept-norge/metadata.ini b/content/faq/resept-norge/metadata.ini
new file mode 100644
index 0000000..eea3fff
--- /dev/null
+++ b/content/faq/resept-norge/metadata.ini
@@ -0,0 +1 @@
+summary = "Det er nesten umulig å få medisinsk cannabis på resept i Norge fordi det er definert som utprøvende behandling. Fastlege kan skrive ut produkter med under 1% THC, mens spesialist på sykehus kan skrive ut alle produkter, men med begrensede refusjonsordninger."
diff --git a/content/faq/typer-medisinsk-cannabis-norge/metadata.ini b/content/faq/typer-medisinsk-cannabis-norge/metadata.ini
new file mode 100644
index 0000000..70c57f9
--- /dev/null
+++ b/content/faq/typer-medisinsk-cannabis-norge/metadata.ini
@@ -0,0 +1 @@
+summary = "Det finnes 19 varianter av medisinsk cannabis tilgjengelig på resept i Norge, inkludert tørket plantemateriale, oljer og munnspray. Varianter med under 1% THC kan skrives ut av fastlege, mens resten krever spesialist på sykehus."
diff --git a/content/frontpage.php b/content/frontpage.php
index a626afb..8f8099b 100644
--- a/content/frontpage.php
+++ b/content/frontpage.php
@@ -6,7 +6,7 @@
 
 <section class="cta-section escape">
     <div class="cta-content">
-        <p>Last ned og print ut informative brosjyrer rettet mot ulike målgrupper</p>
+        <p>Vi har laget enkle brosjyrer som forklarer medisinsk cannabis til pasienter, fagpersoner, foreninger og politikere. Last ned, skriv ut og del!</p>
         <a href="/brosjyrer" class="button inverted bigger">Vis brosjyrer</a>
     </div>
 </section>
@@ -36,7 +36,6 @@
     <h2>6. Gjennomgang av helsekrav til førerkort</h2>
     <p>For at pasienter skal kunne delta i studien er det behov for en grundig gjennomgang av regelverket rundt førerkort og medisinsk cannabis. Som det eneste landet i Europa, har Norge et regelverk som fører til at de fleste pasienter mister førerretten når de får resept på medisinsk cannabis. Dette selv om de bruker varianter og doser som ikke påvirker kjøreevnen. For andre medikamenter som kan ha en midlertidig påvirkning av kjøreevne operer Norge med et tillitssystem. Dagens regelverk diskriminerende derfor pasienter som bruker medisinsk cannabis.</p>
 
-   
 </article>
 
 
@@ -51,7 +50,7 @@
     background-image: url(hero-bg.webp);
     background-size: cover;
     background-position: 30% 80%;
-    min-height: 50vh;
+    min-height: 40vh;
     text-wrap: balance;
     .textbox {
       max-width: 42rem;
@@ -71,11 +70,10 @@
 
   .cta-section {
     background: linear-gradient(135deg, var(--color-green), var(--color-blue));
-    padding: 3rem 1rem;
+    padding: 2rem 1rem;
     text-align: center;
 
     .cta-content {
-      max-width: 42rem;
       margin: 0 auto;
 
       p {
diff --git a/custom/styles/base.css b/custom/styles/base.css
index 3c830ef..f28e7e7 100644
--- a/custom/styles/base.css
+++ b/custom/styles/base.css
@@ -18,7 +18,7 @@
 /* GLOBAL */
 html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth; }
 body { margin: 0; color: var(--color-grey) }
-p, ul, ol { line-height: 1.5em; hyphens: auto }
+p, ul, ol, aside { line-height: 1.5em; hyphens: auto }
 img { max-width: 100%; height: auto; }
 h1 { color: var(--color-green); font-size: 2.3rem }
 h1, h2, h3, h4, h5, h6 {
@@ -119,35 +119,51 @@ main {
 .button {
   display: inline-block;
   text-decoration: none;
-  border-radius: 1rem;
+  border-radius: 2rem;
   padding: 0.35rem 1rem;
-  background-color: var(--color-grey);
-  color: white;
+  background-color: transparent;
+  color: var(--color-grey);
+  outline: 0.08rem var(--color-grey) solid;
 
-  &:hover, &.active {
+  &:hover {
+    background-color: var(--color-grey);
+    color: white;
+    outline: none;
+  }
+
+  &:active, &.active {
     background-color: var(--color-green);
     color: white;
+    outline: none;
   }
 
   &:focus {
-    outline: 0.1rem var(--color-green) solid;
-    color: var(--color-grey);
-    background-color: white;
+    background-color: var(--color-green);
+    color: white;
+    outline: none;
   }
 
   &.inverted {
-    background-color: white;
-    color: var(--color-grey);
+    background-color: transparent;
+    color: white;
+    outline: 0.08rem white solid;
 
-    &:hover, &.active {
+    &:hover {
+      background-color: white;
+      color: var(--color-green);
+      outline: none;
+    }
+
+    &:active, &.active {
       background-color: var(--color-green-light);
       color: var(--color-green);
+      outline: none;
     }
 
     &:focus {
-      outline: 0.1rem white solid;
       color: white;
       background-color: var(--color-grey);
+      outline: none;
     }
   }
 
diff --git a/custom/templates/list-card-grid.php b/custom/templates/list-card-grid.php
index e3ef835..9479939 100644
--- a/custom/templates/list-card-grid.php
+++ b/custom/templates/list-card-grid.php
@@ -26,9 +26,9 @@
                 <?php endif; ?>
                 <div class="card-actions">
                     <?php if (!empty($item['pdf'])): ?>
-                        <a href="<?= htmlspecialchars($item['pdf']) ?>" class="btn-download" download>Last ned PDF</a>
+                        <a href="<?= htmlspecialchars($item['pdf']) ?>" class="button" download>Last ned PDF</a>
                     <?php endif; ?>
-                    <a href="<?= htmlspecialchars($item['url']) ?>" class="btn-read-more">Les mer</a>
+                    <a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les mer</a>
                 </div>
             </article>
         <?php endforeach; ?>
@@ -71,22 +71,6 @@ main > section.list-card-grid-wrapper {
 
       a {
         margin-top: 1.3rem;
-        border-radius: 1rem;
-        background-color: var(--color-grey);
-        padding: 0.35rem 1rem;
-        color: white;
-        text-decoration: none;
-
-        &:hover {
-          background-color: var(--color-green);
-          color: white;
-        }
-
-        &:focus {
-          outline: 0.1rem var(--color-green) solid;
-          color: var(--color-grey);
-          background-color: white;
-        }
       }
     }
   }
diff --git a/custom/templates/list-faq.php b/custom/templates/list-faq.php
new file mode 100644
index 0000000..a7e2bbd
--- /dev/null
+++ b/custom/templates/list-faq.php
@@ -0,0 +1,141 @@
+<?php if (!empty($pageContent)): ?>
+    <article class="list-intro">
+        <?= $pageContent ?>
+    </article>
+<?php endif; ?>
+
+<section class="list-faq-wrapper">
+    <div class="list-faq">
+        <?php foreach ($items as $item): ?>
+            <details class="faq-item">
+                <summary>
+                    <h2><?= htmlspecialchars($item['title']) ?></h2>
+                    <span class="toggle-icon" aria-hidden="true"></span>
+                </summary>
+                <div class="faq-content">
+                    <?php if ($item['summary']): ?>
+                        <p><strong>Kort oppsumert:</strong> <?= htmlspecialchars($item['summary']) ?></p>
+                    <?php endif; ?>
+                    <a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les hele svaret</a>
+                </div>
+            </details>
+        <?php endforeach; ?>
+    </div>
+</section>
+
+<style>
+main > section.list-faq-wrapper {
+  margin-top: 1.3em;
+
+  .list-faq {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .faq-item {
+    background-color: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    transition: border-color 0.2s ease;
+
+    &:hover {
+      border-color: var(--color-green);
+    }
+
+    &[open] {
+      border-color: var(--color-green);
+    }
+  }
+
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    h2 {
+      margin: 0;
+      font-size: 1.3rem;
+      font-weight: 400;
+      color: var(--color-grey);
+      flex: 1;
+    }
+
+    .toggle-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      flex-shrink: 0;
+      position: relative;
+      margin-left: 1rem;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        background-color: var(--color-green);
+        transition: transform 0.3s ease;
+      }
+
+      &::before {
+        top: 50%;
+        left: 0;
+        right: 0;
+        height: 2px;
+        transform: translateY(-50%);
+      }
+
+      &::after {
+        left: 50%;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        transform: translateX(-50%);
+      }
+    }
+
+    &:hover h2 {
+      color: var(--color-green);
+    }
+  }
+
+  .faq-item[open] summary .toggle-icon::after {
+    transform: translateX(-50%) rotate(90deg);
+    opacity: 0;
+  }
+
+  .faq-content {
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    animation: slideDown 0.3s ease;
+
+    p {
+      margin-top: 0;
+      color: var(--color-grey);
+      line-height: 1.6;
+    }
+
+    .button {
+      margin-top: 1rem;
+    }
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+</style>
diff --git a/custom/templates/list.php b/custom/templates/list.php
index 5868996..d0eb5f5 100644
--- a/custom/templates/list.php
+++ b/custom/templates/list.php
@@ -23,6 +23,7 @@
             <?php if ($item['summary']): ?>
                 <p><?= htmlspecialchars($item['summary']) ?></p>
             <?php endif; ?>
+            <a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les mer</a>
         </article>
     <?php endforeach; ?>
 </article>
@@ -44,6 +45,11 @@ main > article {
     h1 {
       margin-top: 1rem;
     }
+
+    > .button {
+      margin-left: 1rem;
+      margin-top: 1rem;
+    }
   }
 }
 </style>