diff --git a/app/controllers/faqs_controller.rb b/app/controllers/faqs_controller.rb
index 895e39d..2b48ae2 100644
--- a/app/controllers/faqs_controller.rb
+++ b/app/controllers/faqs_controller.rb
@@ -1,18 +1,25 @@
 class FaqsController < ApplicationController
   def index
     faqs = Qa.can_display.order_by(:order_position => "asc").filter_by_categories
-      f = faqs.collect do |qa|
+    f = faqs.collect do |qa|
        statuses = qa.statuses_with_classname.collect do |status|
         {
           "status" => status["name"],
           "status-class" => "status-#{status['classname']}"
         }
       end
+      qa_files = qa.qa_files.map do |qa_file|
+        {
+          "file_url" => qa_file.file.url,
+          "file_title" => qa_file.title.blank? ? File.basename(qa_file["file"])
+        }
+      end
       {
         "link_to_show" => OrbitHelper.url_to_show(qa.to_param),
         "question" => qa.title,
         "answer" => qa.answer,
-        "statuses" => statuses
+        "statuses" => statuses,
+        "qa_files" => qa_files
       }
     end
     {
diff --git a/faq.gemspec b/faq.gemspec
index 4162312..795c845 100644
--- a/faq.gemspec
+++ b/faq.gemspec
@@ -2,7 +2,18 @@ $:.push File.expand_path("../lib", __FILE__)
 
 # Maintain your gem's version:
 require "faq/version"
-
+app_path = File.expand_path(__dir__)
+all_template = Dir.glob(template_path+'/*/')
+all_template.each do |folder|
+  if !folder.include?('mobile')
+    begin
+      puts "updating faq index page"
+      Bundler.with_clean_env{%x[cp -f #{app_path}/modules/faq/faq_index2.html.erb #{folder}modules/faq/faq_index2.html.erb]}
+    rescue
+      puts "There has some error when updating faq index page."
+    end
+  end
+end
 # Describe your gem and declare its dependencies:
 Gem::Specification.new do |s|
   s.name        = "faq"
diff --git a/modules/faq/_faq_widget1.html.erb b/modules/faq/_faq_widget1.html.erb
new file mode 100644
index 0000000..357ac03
--- /dev/null
+++ b/modules/faq/_faq_widget1.html.erb
@@ -0,0 +1,15 @@
+<div class="widget-faqs widget1">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <ul class="list-unstyled" data-list="faqs" data-level="0">
+    <li class="widget-content">
+      <a class="widget-content-title" href="{{link_to_show}}" target="_blank" title="{{title}}">{{title}}</a>
+      <span data-list="statuses" data-level="1">
+        <span class="label status {{status-class}}">{{status}}</span>
+      </span>
+    </li>
+  </ul>
+  <p class="more text-right clearfix">
+  <a class="btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多資訊" : "More" %></a> </p>
+</div>
\ No newline at end of file
diff --git a/modules/faq/faq_index1.html.erb b/modules/faq/faq_index1.html.erb
new file mode 100644
index 0000000..63b7fad
--- /dev/null
+++ b/modules/faq/faq_index1.html.erb
@@ -0,0 +1,16 @@
+<div class="index-faqs index1">
+  <h3 class="index-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <ul class="list-unstyled" data-list="faqs" data-level="0">
+    <li class="index-content">
+      <h4>
+        <a class="index-content-title" href="{{link_to_show}}" title="{{question}}">{{question}}</a>
+        <span data-list="statuses" data-level="1">
+          <span class="label status {{status-class}}">{{status}}</span>
+        </span>
+      </h4>
+    </li>
+  </ul>
+</div>
+{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/faq/faq_index2.html.erb b/modules/faq/faq_index2.html.erb
new file mode 100644
index 0000000..8db071d
--- /dev/null
+++ b/modules/faq/faq_index2.html.erb
@@ -0,0 +1,31 @@
+<div class="index-faqs index2">
+  <h1 class="index-title">
+    <span>{{page-title}}</span>
+  </h1>
+  <ul class="list-unstyled" data-list="faqs" data-level="0">
+    <li class="index-content">
+      <h4>
+        <span class="index-content-title">{{question}}</span>
+        <span data-list="statuses" data-level="1">
+          <span class="label status {{status-class}}">{{status}}</span>
+        </span>
+      </h4>
+    <section class="post">
+    <p>{{answer}}</p>
+    <p data-list="qa_files" data-level="0"><a href="{{file_url}}" target="_blank">{{file_title}}</a></p>
+    </section>
+    </li>
+  </ul>
+</div>
+{{pagination_goes_here}}
+
+<script>
+$('.index-faqs.index2 .index-content h4').click(function(){
+  $('section.post').slideUp(200);
+  $(this).removeClass('open');
+  if($("+section",this).css("display")=="none"){
+      $("+section",this).slideDown(300);
+      $(this).addClass("open"); 
+}
+})
+</script>
\ No newline at end of file
diff --git a/modules/faq/info.json b/modules/faq/info.json
new file mode 100644
index 0000000..5cefb92
--- /dev/null
+++ b/modules/faq/info.json
@@ -0,0 +1,30 @@
+{
+    "frontend": [
+        {
+            "filename" : "faq_index1",
+            "name" : {
+                "zh_tw" : "1. 列表 ( 模組標題, 問題 )",
+                "en" : "1. Thumbnail ( widget-title, question )"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "faq_index2",
+            "name" : {
+                "zh_tw" : "2. 手風琴列表 ( 模組標題, 問題 )",
+                "en" : "2. Accordion list ( widget-title, question )"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ],
+    "widgets" : [
+        {
+            "filename" : "faq_widget1",
+            "name" : {
+                "zh_tw" : "1. 列表 ( 模組標題, 問題 )",
+                "en" : "1. List (widget-title, question)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/modules/faq/show.html.erb b/modules/faq/show.html.erb
new file mode 100644
index 0000000..e003463
--- /dev/null
+++ b/modules/faq/show.html.erb
@@ -0,0 +1,20 @@
+<article>
+  <div class="post-title">
+    <h1>{{question}}</h1>
+  </div>
+
+      <span data-list="tags" data-level="0">
+        <a class="tag" href="#">{{tag}}</a>
+      </span>
+  <section class="post">
+    <p>{{answer}}</p>
+  </section>
+  <div class="post-related" data-list="faqs_files" data-level="0">
+   <a href="{{file_url}}" target="_blank">{{file_title}}</a><br/>
+  </div>
+  <div class="post-related" data-list="faqs_links" data-level="0">
+   <a href="{{link_url}}" target="_blank">{{link_title}}</a><br/>
+  </div>
+</article>
+
+{{link_to_edit}}
\ No newline at end of file
diff --git a/modules/faq/thumbs/thumb.png b/modules/faq/thumbs/thumb.png
new file mode 100644
index 0000000..266af56
Binary files /dev/null and b/modules/faq/thumbs/thumb.png differ