diff --git a/landing/keyserver-faq.css b/landing/keyserver-faq.css
index 836f66728..652396ac8 100644
--- a/landing/keyserver-faq.css
+++ b/landing/keyserver-faq.css
@@ -1,64 +1,71 @@
 .faqSection {
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: var(--light-dark-page-background);
   padding: 96px 0;
 }
 
 .faqHeading {
   color: var(--white-100);
   margin-bottom: 64px;
 }
 
 .faqContainer {
   width: 1144px;
   max-width: 90vw;
 }
 
 .faqItemContainer {
   border-bottom: 1px solid var(--white-80);
   padding: 40px 0 24px;
   cursor: pointer;
 }
 
 .questionContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 .questionText {
   color: var(--white-100);
 }
 
 .icon {
   margin-left: 24px;
+  transform: rotate(0deg);
+  transition: transform 500ms;
+}
+
+.activeIcon {
+  transform: rotate(180deg);
+  transition: transform 500ms;
 }
 
 .answerContainer {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 500ms;
 }
 
 .activeAnswerContainer {
   grid-template-rows: 1fr;
 }
 
 .answerText {
   color: var(--white-100);
   margin-top: 16px;
   overflow: hidden;
 }
 
 .link {
   color: inherit;
   text-decoration: underline;
   transition: color 150ms;
 }
 
 .link:hover {
   color: var(--violet-dark-100);
   transition: color 150ms;
 }
diff --git a/landing/keyserver-faq.react.js b/landing/keyserver-faq.react.js
index 3d16c082f..d90df5fa3 100644
--- a/landing/keyserver-faq.react.js
+++ b/landing/keyserver-faq.react.js
@@ -1,66 +1,71 @@
 // @flow
 
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as React from 'react';
 
 import { faqData } from './keyserver-faq-data.js';
 import css from './keyserver-faq.css';
 import typography from './typography.css';
 
 function KeyserverFAQ(): React.Node {
   const questionClassName = classNames([
     typography.subheading2,
     css.questionText,
   ]);
 
   const [activeFAQIndex, setActiveFAQIndex] = React.useState(null);
 
   const onClickFAQItem = React.useCallback(
     (index: number) => {
       if (index === activeFAQIndex) {
         setActiveFAQIndex(null);
       } else {
         setActiveFAQIndex(index);
       }
     },
     [activeFAQIndex],
   );
 
   const keyserverFAQ = React.useMemo(() => {
     return faqData.map((faq, index) => {
       const answerContainerClassName = classNames({
         [css.answerContainer]: true,
         [css.activeAnswerContainer]: activeFAQIndex === index,
       });
 
+      const iconClassName = classNames({
+        [css.icon]: true,
+        [css.activeIcon]: activeFAQIndex === index,
+      });
+
       return (
         <div
           key={index}
           className={css.faqItemContainer}
           onClick={() => onClickFAQItem(index)}
         >
           <div className={css.questionContainer}>
             <p className={questionClassName}>{faq.question}</p>
             <FontAwesomeIcon
               size="sm"
-              className={css.icon}
+              className={iconClassName}
               icon={faChevronDown}
             />
           </div>
           <div className={answerContainerClassName}>{faq.answer}</div>
         </div>
       );
     });
   }, [activeFAQIndex, onClickFAQItem, questionClassName]);
 
   return (
     <section className={css.faqSection}>
       <h1 className={typography.heading1}>FAQ</h1>
       <div className={css.faqContainer}>{keyserverFAQ}</div>
     </section>
   );
 }
 
 export default KeyserverFAQ;