diff --git a/Gemfile b/Gemfile
index a8f3e2b..3e950f5 100644
--- a/Gemfile
+++ b/Gemfile
@@ -26,6 +26,7 @@ gem 'thredded', '~> 1.0'
 gem "simple_form" , "5.1.0"
 gem "simple_form_tailwind_css"
 gem 'kaminari'
+gem 'ransack'
 
 gem "passenger" , "6.0.15" ,  require: "phusion_passenger/rack_handler"
 gem "bootsnap", require: false
diff --git a/Gemfile.lock b/Gemfile.lock
index 48d4796..99efdb2 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -306,6 +306,10 @@ GEM
       thor (~> 1.0)
       zeitwerk (~> 2.5)
     rake (13.0.6)
+    ransack (3.2.1)
+      activerecord (>= 6.1.5)
+      activesupport (>= 6.1.5)
+      i18n
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
@@ -429,6 +433,7 @@ DEPENDENCIES
   pg (~> 1.1)
   pundit (~> 2.3)
   rails (~> 7.0)
+  ransack
   ruby2js!
   sassc-rails
   selenium-webdriver
diff --git a/app/controllers/stories_controller.rb b/app/controllers/stories_controller.rb
index a666c9f..91b684d 100644
--- a/app/controllers/stories_controller.rb
+++ b/app/controllers/stories_controller.rb
@@ -2,7 +2,9 @@ class StoriesController < ApplicationController
   before_action :set_story, only: %i[ show edit update destroy ]
 
   def index
-    @stories = Story.all.page params[:page]
+    @q = Story.ransack(params[:q])
+    @q.sorts = 'created_at desc' if @q.sorts.empty?
+    @stories = @q.result(distinct: true).page( params[:page])
   end
 
   def show
diff --git a/app/views/stories/index.html.haml b/app/views/stories/index.html.haml
index 7b9d194..d192696 100644
--- a/app/views/stories/index.html.haml
+++ b/app/views/stories/index.html.haml
@@ -1,4 +1,10 @@
 = paginate @stories
+
+.flex.justify-end
+  = sort_link(@q, :happened ,class: 'flex flex-nowrap text-md')
+  .border-r-4.mx-4
+  = sort_link(@q, :created_at , class: 'flex flex-nowrap text-md')
+
 - @stories.each do |story|
   = render_story(story)
 
diff --git a/config/initializers/ransack.rb b/config/initializers/ransack.rb
new file mode 100644
index 0000000..89e412c
--- /dev/null
+++ b/config/initializers/ransack.rb
@@ -0,0 +1,18 @@
+require "ransack"
+
+Ransack.configure do |config|
+
+  config.custom_arrows = {
+    up_arrow: '<div class="mt-1 ml-1 h-0 w-0 border-x-8 border-x-transparent border-b-[16px] border-b-blue-600"></div>',
+    down_arrow: '<div class="mt-1 ml-1 h-0 w-0 border-x-8 border-x-transparent border-t-[16px] border-t-blue-600"></div>',
+  }
+  # Change default search parameter key name.
+  # Default key name is :q
+  config.search_key = :q
+
+  # Raise errors if a query contains an unknown predicate or attribute.
+  # Default is true (do not raise error on unknown conditions).
+  config.ignore_unknown_conditions = false
+
+  config.hide_sort_order_indicators = false
+end
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 4944cb3..6a389a2 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
   content: [
     './public/*.html',
     './app/helpers/**/*.rb',
+    './config/initializers/**/*.rb',
     './app/javascript/**/*.js',
     './app/views/**/*.{erb,haml,html,slim}' ,
     fullname , fullname2