diff --git a/Gemfile b/Gemfile
index 261dd39..d4f5083 100644
--- a/Gemfile
+++ b/Gemfile
@@ -24,6 +24,13 @@ gem 'bootsnap', '>= 1.4.4', require: false
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug', platforms: %i[mri mingw x64_mingw]
+  gem 'rspec-rails', '~> 6.0.0', groups: %i[development test]
+  gem 'factory_bot_rails', '~> 6.0.0',
+  gem 'rubocop', '~> 1.48', require: false
+  gem 'rubocop-performance', '~> 1.16', require: false
+  gem 'rubocop-rails', '~> 2.18', require: false
+  gem 'rubocop-rake', '~> 0.6.0', require: false
+  gem 'rubocop-rspec', '~> 2.19', require: false
 end
 
 group :development do
@@ -36,13 +43,3 @@ end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: %i[mingw mswin x64_mingw jruby]
-
-gem 'rspec-rails', '~> 6.0.0', groups: %i[development test]
-
-gem 'factory_bot_rails', '~> 6.0.0', groups: %i[development test]
-
-gem 'rubocop', '~> 1.48', groups: %i[development test], require: false
-gem 'rubocop-performance', '~> 1.16', groups: %i[development test], require: false
-gem 'rubocop-rails', '~> 2.18', groups: %i[development test], require: false
-gem 'rubocop-rake', '~> 0.6.0', groups: %i[development test], require: false
-gem 'rubocop-rspec', '~> 2.19', groups: %i[development test], require: false
diff --git a/app/javascript/packs/hello_react.jsx b/app/javascript/packs/hello_react.jsx
deleted file mode 100644
index 772fc97..0000000
--- a/app/javascript/packs/hello_react.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
-// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
-// of the page.
-
-import React from 'react'
-import ReactDOM from 'react-dom'
-import PropTypes from 'prop-types'
-
-const Hello = props => (
-  <div>Hello {props.name}!</div>
-)
-
-Hello.defaultProps = {
-  name: 'David'
-}
-
-Hello.propTypes = {
-  name: PropTypes.string
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  ReactDOM.render(
-    <Hello name="React" />,
-    document.body.appendChild(document.createElement('div')),
-  )
-})
diff --git a/app/javascript/packs/react_app.jsx b/app/javascript/packs/react_app.jsx
new file mode 100644
index 0000000..83dbf75
--- /dev/null
+++ b/app/javascript/packs/react_app.jsx
@@ -0,0 +1,11 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
+// of the page.
+
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import Main from '@/main.jsx'
+
+document.addEventListener('DOMContentLoaded', () => {
+  createRoot(document.getElementById('root')).render(<Main />)
+})
diff --git a/app/javascript/src/main.css b/app/javascript/src/main.css
new file mode 100644
index 0000000..2aec1ad
--- /dev/null
+++ b/app/javascript/src/main.css
@@ -0,0 +1,3 @@
+.main {
+  padding: 20px;
+}
diff --git a/app/javascript/src/main.jsx b/app/javascript/src/main.jsx
new file mode 100644
index 0000000..9b7791d
--- /dev/null
+++ b/app/javascript/src/main.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './main.css'
+
+const Main = props => (
+  <div className='main'>Hello {props.name}!</div>
+)
+
+Main.defaultProps = {
+  name: 'World'
+}
+
+Main.propTypes = {
+  name: PropTypes.string
+}
+
+export default Main
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index af25b03..e69de29 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -1,7 +0,0 @@
-<h1>Haistack Coding Challenge</h1>
-
-<p>Coding challenge presented to candidates interviewing for a role at <a href="https://www.linkedin.com/company/haistack/">Haistack.AI</a>.</p>
-
-<p><em>#findyourneedle</em></p>
-
-<p>Copyright 2023 <a href="https://www.linkedin.com/company/haistack/">Haistack.AI</a></p>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 5d75ef8..be209e4 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -8,9 +8,11 @@
 
     <%= stylesheet_pack_tag 'application', media: 'all' %>
     <%= javascript_pack_tag 'application' %>
+    <%= javascript_pack_tag 'react_app' %>
   </head>
 
   <body>
+    <div id="root"></div>
     <%= yield %>
   </body>
 </html>
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index d16d9af..072b8e1 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1,3 +1,10 @@
 const { environment } = require('@rails/webpacker')
 
+const path = require('path')
+
+// Add alias for @ symbol
+environment.config.set('resolve.alias', {
+  '@': path.resolve(__dirname, '..', '..', 'app/javascript/src')
+})
+
 module.exports = environment
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..1eae6ae
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "module": "CommonJS",
+    "target": "ES6",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["app/javascript/src/*"]
+    }
+  },
+  "exclude": ["node_modules"],
+}
diff --git a/spec/views/home/index.html.erb_spec.rb b/spec/views/home/index.html.erb_spec.rb
deleted file mode 100644
index efee2fd..0000000
--- a/spec/views/home/index.html.erb_spec.rb
+++ /dev/null
@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-require 'rails_helper'
-
-RSpec.describe 'home/index.html.erb' do
-  it 'renders the home' do
-    render
-
-    expect(rendered).to include('Haistack Coding Challenge')
-  end
-end