diff --git a/app/javascript/packs/login.js b/app/javascript/packs/login.js
new file mode 100644
index 0000000..1c40bde
--- /dev/null
+++ b/app/javascript/packs/login.js
@@ -0,0 +1 @@
+import "@src/login";
\ No newline at end of file
diff --git a/app/javascript/src/home.jsx b/app/javascript/src/home.jsx
index 4acd65c..5e6b004 100644
--- a/app/javascript/src/home.jsx
+++ b/app/javascript/src/home.jsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import './login.jsx'
 
 import './home.scss';
 
-const Home = props => (
-  <h1>Home page react is working</h1>
+const Home = () => (
+  <Login></Login>
 )
 
 document.addEventListener('DOMContentLoaded', () => {
diff --git a/app/javascript/src/login.jsx b/app/javascript/src/login.jsx
new file mode 100644
index 0000000..a9ba9ad
--- /dev/null
+++ b/app/javascript/src/login.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+
+const Login = () => {
+    return (
+        <>
+            <nav className='navbar navbar-expand navbar-light bg-light'>
+                <div className='container'>
+                    <a className='navbar-brand' href="#">Logo</a>
+                    <div className='collapse navbar-collapse'>
+                        <label for='language'>language:</label>
+                        <select name="language" id='language_dropdown'>
+                            <option>Bahasa Malaya</option>
+                            <option>Dansk</option>
+                            <option>English</option>
+                            <option>Suomi</option>
+                        </select>
+                    </div>
+                </div>
+            </nav>
+            <main>
+                <div>
+                    <h1>Welcome to Twitter.</h1>
+                    <p>Connect with your friends - and other fascinating people. Get in-the-moment updates on the things that interest you.  And watch events unfold, in real time, from every angle.</p>
+                    <div>
+                        <div>Hack Pacific - Backendium Twitter Project</div>
+                        <a>Tweet and photo by @Hackpacific 3:20PM - 15 December 2016</a>
+                    </div>
+                </div>
+                <div>
+                    <div id="section__id">
+                        <input>Username</input>
+                        <div>
+                            <input>Password</input>
+                            <button>Log in</button>
+                        </div>
+                        <div>
+                            <checkbox></checkbox>
+                            <a href="#">Forgot password?</a>
+                        </div>
+                    </div>
+                    <div id='section__signup'>
+                        <div>
+                            <strong>New to Twitter?</strong>
+                            <a href="#">Sign up</a>
+                        </div>
+                        <div>
+                            <input>Username</input>
+                            <input>Email</input>
+                            <input>Password</input>
+                        </div>
+                        <button>Sign up for Twitter</button>
+                    </div>
+                    <div></div>
+                </div>
+            </main>
+        </>
+    )
+}
+
+export default Login;
\ No newline at end of file
diff --git a/app/views/static_pages/login.html.erb b/app/views/static_pages/login.html.erb
new file mode 100644
index 0000000..b5eecf4
--- /dev/null
+++ b/app/views/static_pages/login.html.erb
@@ -0,0 +1 @@
+<%= javascript_pack_tag 'login' %>
\ No newline at end of file
diff --git a/db/schema.rb b/db/schema.rb
index 9bf1764..99f85a0 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -11,62 +11,63 @@
 # It's strongly recommended that you check this file into your version control system.
 
 ActiveRecord::Schema.define(version: 2022_03_28_042533) do
-  create_table 'active_storage_attachments', force: :cascade do |t|
-    t.string 'name', null: false
-    t.string 'record_type', null: false
-    t.integer 'record_id', null: false
-    t.integer 'blob_id', null: false
-    t.datetime 'created_at', null: false
-    t.index ['blob_id'], name: 'index_active_storage_attachments_on_blob_id'
-    t.index %w[record_type record_id name blob_id], name: 'index_active_storage_attachments_uniqueness', unique: true
+
+  create_table "active_storage_attachments", force: :cascade do |t|
+    t.string "name", null: false
+    t.string "record_type", null: false
+    t.integer "record_id", null: false
+    t.integer "blob_id", null: false
+    t.datetime "created_at", null: false
+    t.index ["blob_id"], name: "index_active_storage_attachments_on_blob_id"
+    t.index ["record_type", "record_id", "name", "blob_id"], name: "index_active_storage_attachments_uniqueness", unique: true
   end
 
-  create_table 'active_storage_blobs', force: :cascade do |t|
-    t.string 'key', null: false
-    t.string 'filename', null: false
-    t.string 'content_type'
-    t.text 'metadata'
-    t.string 'service_name', null: false
-    t.bigint 'byte_size', null: false
-    t.string 'checksum', null: false
-    t.datetime 'created_at', null: false
-    t.index ['key'], name: 'index_active_storage_blobs_on_key', unique: true
+  create_table "active_storage_blobs", force: :cascade do |t|
+    t.string "key", null: false
+    t.string "filename", null: false
+    t.string "content_type"
+    t.text "metadata"
+    t.string "service_name", null: false
+    t.bigint "byte_size", null: false
+    t.string "checksum", null: false
+    t.datetime "created_at", null: false
+    t.index ["key"], name: "index_active_storage_blobs_on_key", unique: true
   end
 
-  create_table 'active_storage_variant_records', force: :cascade do |t|
-    t.integer 'blob_id', null: false
-    t.string 'variation_digest', null: false
-    t.index %w[blob_id variation_digest], name: 'index_active_storage_variant_records_uniqueness', unique: true
+  create_table "active_storage_variant_records", force: :cascade do |t|
+    t.integer "blob_id", null: false
+    t.string "variation_digest", null: false
+    t.index ["blob_id", "variation_digest"], name: "index_active_storage_variant_records_uniqueness", unique: true
   end
 
-  create_table 'sessions', force: :cascade do |t|
-    t.string 'token'
-    t.integer 'user_id'
-    t.datetime 'created_at', precision: 6, null: false
-    t.datetime 'updated_at', precision: 6, null: false
-    t.index ['user_id'], name: 'index_sessions_on_user_id'
+  create_table "sessions", force: :cascade do |t|
+    t.string "token"
+    t.integer "user_id"
+    t.datetime "created_at", precision: 6, null: false
+    t.datetime "updated_at", precision: 6, null: false
+    t.index ["user_id"], name: "index_sessions_on_user_id"
   end
 
-  create_table 'tweets', force: :cascade do |t|
-    t.string 'message'
-    t.integer 'user_id'
-    t.datetime 'created_at', precision: 6, null: false
-    t.datetime 'updated_at', precision: 6, null: false
-    t.index ['user_id'], name: 'index_tweets_on_user_id'
+  create_table "tweets", force: :cascade do |t|
+    t.string "message"
+    t.integer "user_id"
+    t.datetime "created_at", precision: 6, null: false
+    t.datetime "updated_at", precision: 6, null: false
+    t.index ["user_id"], name: "index_tweets_on_user_id"
   end
 
-  create_table 'users', force: :cascade do |t|
-    t.string 'username'
-    t.string 'email'
-    t.string 'password'
-    t.datetime 'created_at', precision: 6, null: false
-    t.datetime 'updated_at', precision: 6, null: false
-    t.index ['email'], name: 'index_users_on_email', unique: true
-    t.index ['username'], name: 'index_users_on_username', unique: true
+  create_table "users", force: :cascade do |t|
+    t.string "username"
+    t.string "email"
+    t.string "password"
+    t.datetime "created_at", precision: 6, null: false
+    t.datetime "updated_at", precision: 6, null: false
+    t.index ["email"], name: "index_users_on_email", unique: true
+    t.index ["username"], name: "index_users_on_username", unique: true
   end
 
-  add_foreign_key 'active_storage_attachments', 'active_storage_blobs', column: 'blob_id'
-  add_foreign_key 'active_storage_variant_records', 'active_storage_blobs', column: 'blob_id'
-  add_foreign_key 'sessions', 'users'
-  add_foreign_key 'tweets', 'users'
+  add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
+  add_foreign_key "active_storage_variant_records", "active_storage_blobs", column: "blob_id"
+  add_foreign_key "sessions", "users"
+  add_foreign_key "tweets", "users"
 end
diff --git a/package.json b/package.json
index 2fa1e9b..95b38e0 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "full-stack-twitter-clone",
   "private": true,
   "engines": {
-    "node": "^16.17"
+    "node": "^16.14"
   },
   "dependencies": {
     "@babel/preset-react": "^7.16.7",
@@ -22,4 +22,4 @@
   "devDependencies": {
     "webpack-dev-server": "^3"
   }
-}
+}
\ No newline at end of file