diff --git a/democracy/page/default_faq/default_faq.php b/democracy/page/default_faq/default_faq.php
index 9e5730c..4501d58 100644
--- a/democracy/page/default_faq/default_faq.php
+++ b/democracy/page/default_faq/default_faq.php
@@ -14,7 +14,7 @@ class default_faq implements SYSTEM\PAGE\Page {
         $faqs = \SYSTEM\PAGE\text::tag('faq');
         $i = 0;
         while(array_key_exists('faq_q_'. ($i < 9 ? sprintf("%02d", ++$i) : ++$i), $faqs)){
-            $question = array(  'n' => $i, 'in' => $i == 1 ? 'in' : '',
+            $question = array(  'n' => $i, 'in' => $i == 1 ? 'in' : '', 'in_css' => $i == 1 ? 'transform: rotate(180deg)' : '',
                                 'question' => '${faq_q_'.($i <= 9 ? sprintf("%02d", $i) : $i).'}', //${faq_q_0n} ${faq_q_nn}
                                 'answer' => '${faq_a_'.($i <= 9 ? sprintf("%02d", $i) : $i).'}');  //${faq_a_0n} ${faq_a_nn}
             $vars['questions'] .= \SYSTEM\PAGE\replace::replaceFile((new PPAGE('default_faq/tpl/question.tpl'))->SERVERPATH(), $question);
diff --git a/democracy/page/default_faq/js/default_faq.js b/democracy/page/default_faq/js/default_faq.js
index 7cb3155..fcf8d6f 100644
--- a/democracy/page/default_faq/js/default_faq.js
+++ b/democracy/page/default_faq/js/default_faq.js
@@ -32,7 +32,7 @@ function init_faq(){
             $("#femail").focus();
             return null;
         }   
-        if (frage == "" || frage.length < 3 ){
+        if (frage === "" || frage.length < 3 ){
             alert( "bitte eine Frage eingeben");    
             $("#exampleTextarea").focus();
             return null;
@@ -64,4 +64,11 @@ function init_faq(){
                 }
         });
     });
+    
+    $('.panel').on('show.bs.collapse', function (e) {
+        $(".openarrow",this).css("transform","rotate(180deg)");
+    });
+    $('.panel').on('hide.bs.collapse', function (e) {
+        $(".openarrow",this).css("transform","rotate(0deg)");
+    });
 }
\ No newline at end of file
diff --git a/democracy/page/default_faq/tpl/default_faq.tpl b/democracy/page/default_faq/tpl/default_faq.tpl
index 4f57209..6dc1c60 100644
--- a/democracy/page/default_faq/tpl/default_faq.tpl
+++ b/democracy/page/default_faq/tpl/default_faq.tpl
@@ -1,4 +1,4 @@
-<div class="single">
+<div class="single" style="background-color: #e8e8e8;">
     <div class="container">
         <div class="wthree-heading"><h3>FAQ</h3></div>
         <br><br>
@@ -7,7 +7,7 @@
             <div class="panel panel-default panel-faq">
                 <div class="panel-heading">
                     <h4 class="panel-title">
-                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse_ask"><b><i class="fa fa-caret-down" aria-hidden="true"></i></b>&nbsp;&nbsp;<b>Eine Frage stellen</b></a>
+                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse_ask" class="faq_header"><i class="fa fa-question-circle" aria-hidden="true"></i>&nbsp;&nbsp;<b>Eine Frage stellen</b><i class="openarrow fa fa-angle-down" aria-hidden="true" style="${in_css}"></i></a>
                     </h4>
                 </div>
                 <div id="collapse_ask" class="panel-collapse collapse ${in}">
diff --git a/democracy/page/default_faq/tpl/question.tpl b/democracy/page/default_faq/tpl/question.tpl
index b95c7c4..e976abc 100644
--- a/democracy/page/default_faq/tpl/question.tpl
+++ b/democracy/page/default_faq/tpl/question.tpl
@@ -1,11 +1,10 @@
 <div class="panel panel-default panel-faq">
     <div class="panel-heading">
         <h4 class="panel-title">
-            <a data-toggle="collapse" data-parent="#accordion" href="#collapse${n}"><b><i class="fa fa-caret-down" aria-hidden="true"></i></b>&nbsp;&nbsp;${question}</a>
+            <a data-toggle="collapse" data-parent="#accordion" href="#collapse${n}" class="faq_header"><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;&nbsp;${question}<i class="openarrow fa fa-angle-down" aria-hidden="true" style="${in_css}"></i></a>
         </h4>
     </div>
     <div id="collapse${n}" class="panel-collapse collapse ${in}">
         <div class="panel-body">${answer}</div>
     </div>
-</div>
-<br>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/democracy/page/default_page/css/default_page.css b/democracy/page/default_page/css/default_page.css
index 99109b1..c8b8b38 100644
--- a/democracy/page/default_page/css/default_page.css
+++ b/democracy/page/default_page/css/default_page.css
@@ -383,12 +383,21 @@ body {
     display: table-cell;
 }
 
-.panel-faq{border-color:#4f81bd}
-.panel-faq>.panel-heading{color:#fff;background-color:#4494d3;border-color:#4f81bd}
-.panel-faq>.panel-heading+.panel-collapse>.panel-body{border-top-color:#4f81bd}
+.panel-faq{margin-bottom: 12px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); border: 0; border-radius: 0;}
+.panel-faq>.panel-heading{border-radius: 0; background-color: #fff; border-color: #000;}
+.panel-faq>.panel-heading+.panel-collapse>.panel-body{border-color: grey}
 .panel-faq>.panel-heading .badge{color:#d9edf7;background-color:#4494d3}
 .panel-faq>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#4f81bd}
-.panel-faq>.panel-heading>h4>a:hover{text-decoration: none;}
-.panel-faq>.panel-heading>h4>a:active{text-decoration: none;}
-.panel-faq>.panel-heading>h4>a:visited{text-decoration: none;}
-.panel-faq>.panel-heading>h4>a:focus{text-decoration: none;}
\ No newline at end of file
+.panel-faq>.panel-heading>.panel-title{color: #333; font-size: 22px; padding-top: 15px; padding-bottom: 15px;}
+.panel-faq>.panel-heading>.panel-title>a{}
+.panel-faq>.panel-heading>.panel-title>a:hover{text-decoration: none;}
+.panel-faq>.panel-heading>.panel-title>a:active{text-decoration: none;}
+.panel-faq>.panel-heading>.panel-title>a:visited{text-decoration: none;}
+.panel-faq>.panel-heading>.panel-title>a:focus{text-decoration: none;}
+
+.openarrow{
+    float:right;
+    font-size: 40px;
+    line-height: 30px;
+    transition: transform .2s;
+}
\ No newline at end of file