diff --git a/Gemfile b/Gemfile
index 0a253993..aca5d3bc 100644
--- a/Gemfile
+++ b/Gemfile
@@ -46,6 +46,9 @@ gem 'animate-rails'
 gem 'webpacker'
 gem 'react-rails'
 
+# Non-JS frontend
+gem "view_component", require: "view_component/engine"
+
 # Form enhancements
 gem 'redcarpet' #markdown formatting
 gem 'acts_as_list' #sortables
diff --git a/Gemfile.lock b/Gemfile.lock
index cbf4b0be..d3a09229 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1520,6 +1520,9 @@ GEM
       unf_ext
     unf_ext (0.0.7.7)
     uniform_notifier (1.14.1)
+    view_component (2.36.0)
+      activesupport (>= 5.0.0, < 8.0)
+      method_source (~> 1.0)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.1.0)
@@ -1609,6 +1612,7 @@ DEPENDENCIES
   thredded!
   tribute
   uglifier (>= 1.3.0)
+  view_component
   web-console
   webpacker
   word_count_analyzer
diff --git a/app/components/button_component.html.erb b/app/components/button_component.html.erb
new file mode 100644
index 00000000..a5b5f69b
--- /dev/null
+++ b/app/components/button_component.html.erb
@@ -0,0 +1 @@
+<div>Add Button template here</div>
diff --git a/app/components/button_component.rb b/app/components/button_component.rb
new file mode 100644
index 00000000..26285ffd
--- /dev/null
+++ b/app/components/button_component.rb
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class ButtonComponent < ViewComponent::Base
+  def initialize(text:, left_icon:, right_icon:)
+    @text       = text
+    @left_icon  = left_icon
+    @right_icon = right_icon
+  end
+
+end