diff --git a/app/components/renderers/kramdown.rb b/app/components/renderers/kramdown.rb
new file mode 100644
index 000000000..6ea8ffbfb
--- /dev/null
+++ b/app/components/renderers/kramdown.rb
@@ -0,0 +1,27 @@
+module Components::Renderers
+  class Kramdown < Components::Renderers::Base
+    include Phlex::Rails::Helpers::Sanitize
+
+    def self.supports?(file)
+      FileHandlers::Kramdown.can_load? file&.mime_type
+    end
+
+    def before_template
+      @content = @file.attachment.read.force_encoding(Encoding::UTF_8).encode("UTF-8", invalid: :replace)
+    end
+
+    def view_template
+      div class: "card" do
+        article class: "card-body" do
+          sanitize(
+            ::Kramdown::Document.new(
+              @content,
+              header_offset: 2,
+              input: "GFM"
+            ).to_html
+          )
+        end
+      end
+    end
+  end
+end
diff --git a/app/lib/file_handlers/kramdown.rb b/app/lib/file_handlers/kramdown.rb
new file mode 100644
index 000000000..21954d1ec
--- /dev/null
+++ b/app/lib/file_handlers/kramdown.rb
@@ -0,0 +1,14 @@
+class FileHandlers::Kramdown < FileHandlers::Base
+  # i18n-tasks-use t("file_handlers.handlers.kramdown")
+
+  ENVIRONMENTS = [:browser].freeze
+  INPUT_TYPES = Mime::EXTENSION_LOOKUP.slice("md").values.freeze
+
+  def self.priority
+    200
+  end
+
+  def self.component
+    Components::Renderers::Kramdown
+  end
+end