diff --git a/app/javascript/images/.keep b/app/javascript/images/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/app/javascript/images/application/cdao-bg.png b/app/javascript/images/application/cdao-bg.png
new file mode 100644
index 0000000..2ba60b5
Binary files /dev/null and b/app/javascript/images/application/cdao-bg.png differ
diff --git a/app/javascript/images/application/cdasiaonline_logo.png b/app/javascript/images/application/cdasiaonline_logo.png
new file mode 100644
index 0000000..710b9bd
Binary files /dev/null and b/app/javascript/images/application/cdasiaonline_logo.png differ
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 66f2702..4989aab 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -27,6 +27,9 @@ Rails.start()
 Turbolinks.start()
 ActiveStorage.start()
 
+const images = require.context('../images', true)
+const imagePath = (name) => images(name, true)
+
 $(document).on("ready turbolinks:load", function () {
   $('#toggleSideNav').on('click', function () {
     $('#sidenav').toggleClass('active');
diff --git a/app/javascript/src/application.scss b/app/javascript/src/application.scss
index 59eb892..f08250b 100644
--- a/app/javascript/src/application.scss
+++ b/app/javascript/src/application.scss
@@ -102,4 +102,12 @@
   margin-bottom: 10px;
   padding-left: 5px;
   background: #efefef;
+}
+
+.sessions-body-bg {
+  background-image: url('../../javascript/images/application/cdao-bg.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  overflow-x: hidden;
+  box-shadow: inset 0 0 0 2000px rgb(154 107 107 / 30%);
 }
\ No newline at end of file
diff --git a/app/javascript/src/application/sessions.scss b/app/javascript/src/application/sessions.scss
index fffd9d9..2ddb27e 100644
--- a/app/javascript/src/application/sessions.scss
+++ b/app/javascript/src/application/sessions.scss
@@ -1,6 +1,19 @@
 .login-body-box .content-body {
     padding: 26px;
-    background: #949494ba;
-    box-shadow: 10px 5px 5px #e8e8e8;
+    background: #9494946b;
+    box-shadow: 10px 5px 5px #7a6346;
     border-radius: 4px;
-}
\ No newline at end of file
+    width: 350px;
+    margin-top: -100px;
+}
+
+.login-logo {
+    height: 100%;
+}
+
+.login-logo {
+    .app-logo {
+        width: 370px;
+        margin-top: 30px;
+    }
+}
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
index dbc83e3..d83a898 100644
--- a/app/views/devise/passwords/new.html.erb
+++ b/app/views/devise/passwords/new.html.erb
@@ -1,4 +1,4 @@
-<h3 class="text-center mb-3">Forgot your password?</h3>
+<h3 class="text-center mb-3 text-white">Forgot your password?</h3>
 
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>
@@ -9,7 +9,7 @@
   </div>
 
   <div class="d-grid gap-2 mb-3">
-    <%= f.submit "Send me reset password instructions", class: "btn btn-primary" %>
+    <%= f.submit "Send me reset password instructions", class: "btn btn-danger" %>
   </div>
 <% end %>
 
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 5fddcb2..46f9555 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -1,4 +1,4 @@
-<h2 class="text-center">Log in</h2>
+<h2 class="text-center text-white">Log in</h2>
 
 <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
 
@@ -22,7 +22,7 @@
   <% end %>
 
   <div class="d-grid gap-2 mb-3">
-    <%= f.submit "Log in", class: "btn btn-primary" %>
+    <%= f.submit "Log in", class: "btn btn-danger" %>
   </div>
 <% end %>
 
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 3012ab6..183eaa1 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -11,16 +11,20 @@
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>
 
-  <body class="container-fluid h-100 w-100 p-0" data-controller="selectize">
-
-    <div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-center align-items-center' %>">
+  <body class="<%= current_user.present? ? 'container-fluid h-100 w-100 p-0' : 'container-fluid h-100 w-100 p-0 sessions-body-bg' %> " data-controller="selectize">
+    
+    <div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-end align-items-center' %>">
+  
       <% if current_user.present? %>
         <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;">
           <%= render(SidenavComponent.new(current_user: current_user))%>
         </div>
       <% end %>
 
-      <div class="<%= current_user.present? ? 'col py-3 main-content-body' : 'col-sm-3 login-body-box' %>">
+      <div class="<%= current_user.present? ? 'd-none' : 'col-sm-8 login-logo' %>">
+      <%= image_pack_tag 'application/cdasiaonline_logo.png', class:"app-logo" %>
+      </div>
+      <div class="<%= current_user.present? ? 'col py-3 main-content-body' : 'col-sm-4 login-body-box' %>">
         <div class="content-body">
           <%= yield %>
         </div>