diff --git a/app/views/dashboard/home.html.erb b/app/views/dashboard/home.html.erb
index c923c49..baa1acb 100644
--- a/app/views/dashboard/home.html.erb
+++ b/app/views/dashboard/home.html.erb
@@ -1,56 +1,90 @@
-<div class="dashboard-wrapper">
-  <div class="main-container">
-    <div class="row-fluid">
-      <div class="span12"> <!--begin span12 -->
-        <div class="widget">
-          <div class="widget-header">
-            <div class="title">
-              <span class="fs1" aria-hidden="true" data-icon="&#xe0a0;"></span> Current Statistics
-            </div>
-            <!-- Begin Title Buttons-->
-            <div class="tools pull-right">
-              <div class="btn-group">
-                <button id="change_to_bar_graph" class="btn btn-small">
-                  <span aria-label="change to bar graph" data-icon="&#xe14b;"></span>
-                </button>
-                <button id="change_to_pie_charts" class="btn btn-small">
-                  <span aria-label="change to pie charts" data-icon="&#xe096;"></span>
-                </button>
-              </div>
-            </div>
-            <!-- End Title Buttons-->
-          </div>
-          <div id="charts_body" class="widget-body">
-            <%#= render partial: "dashboard_stats" %>
-          </div>
-          <div class="clearfix">
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-12">
+      <div class="card shadow-sm">
+        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
+          <h4 class="mb-0">
+            <i class="bi bi-graph-up text-primary"></i> Current Statistics
+          </h4>
+          <!-- Chart Type Toggle -->
+          <div class="btn-group" role="group" aria-label="Chart type selection">
+            <button id="change_to_bar_graph" class="btn btn-outline-primary btn-sm" title="Bar Graph View" aria-label="Switch to bar graph">
+              <i class="bi bi-bar-chart-fill"></i> Bar Graph
+            </button>
+            <button id="change_to_pie_charts" class="btn btn-outline-primary btn-sm" title="Pie Charts View" aria-label="Switch to pie charts">
+              <i class="bi bi-pie-chart-fill"></i> Pie Charts
+            </button>
           </div>
         </div>
-      </div> <!-- end span12 -->
+        <div id="charts_body" class="card-body p-4">
+          <!-- Charts will load here dynamically -->
+          <div class="text-center py-5">
+            <div class="spinner-border text-primary" role="status">
+              <span class="visually-hidden">Loading charts...</span>
+            </div>
+            <p class="text-muted mt-3">Loading statistics...</p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 
 <script type="text/javascript">
-function makeActive(){
+function makeActive() {
   $('li[id="home"]').addClass('active');
-};
+}
 
 $("#change_to_bar_graph").click(function(event) {
-	event.preventDefault();
-	$("#charts_body").empty()
-	$("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "bar_graph").inspect %>);
-	
-})
+  event.preventDefault();
+
+  // Add loading state
+  $("#charts_body").html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div><p class="text-muted mt-3">Loading bar graph...</p></div>');
+
+  // Remove active state from other button
+  $("#change_to_pie_charts").removeClass('active');
+  $(this).addClass('active');
+
+  // Load new content
+  $("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "bar_graph").inspect %>);
+});
 
 $("#change_to_pie_charts").click(function(event) {
-	event.preventDefault();
-	$("#charts_body").empty()
-	$("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "pie_charts").inspect %>);
-})
+  event.preventDefault();
 
-$(document).ready(
-  makeActive,
-  $("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "pie_charts").inspect %>)
-);
+  // Add loading state
+  $("#charts_body").html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div><p class="text-muted mt-3">Loading pie charts...</p></div>');
+
+  // Remove active state from other button
+  $("#change_to_bar_graph").removeClass('active');
+  $(this).addClass('active');
+
+  // Load new content
+  $("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "pie_charts").inspect %>);
+});
+
+$(document).ready(function() {
+  makeActive();
+
+  // Mark pie charts as default active view
+  $("#change_to_pie_charts").addClass('active');
+
+  // Load default view
+  $("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "pie_charts").inspect %>);
+});
+
+// Handle Turbolinks page loads
+$(document).on('turbolinks:load', function() {
+  makeActive();
+});
 </script>
+
+<style>
+  /* Active button state for chart toggles */
+  #change_to_bar_graph.active,
+  #change_to_pie_charts.active {
+    background-color: var(--rg-primary);
+    color: white;
+    border-color: var(--rg-primary);
+  }
+</style>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index cdef7f9..c966de4 100755
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -64,13 +64,13 @@
       </div>
     <% end %>
 
-    <div class="mt-4 p-3 bg-warning bg-opacity-10 border border-warning rounded">
+    <div class="mt-4 p-3 rounded" style="background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1)); border: 2px solid rgba(255, 193, 7, 0.3); backdrop-filter: blur(10px);">
       <div class="d-flex align-items-start">
-        <i class="bi bi-exclamation-triangle-fill text-warning me-2 mt-1"></i>
+        <i class="bi bi-exclamation-triangle-fill text-warning me-2 mt-1" style="font-size: 1.25rem;"></i>
         <div class="small">
-          <strong>Security Training Environment</strong><br>
+          <strong class="d-block mb-1">Security Training Environment</strong>
           This is an intentionally vulnerable application for educational purposes.
-          <a href="https://github.com/OWASP/railsgoat/wiki" target="_blank" class="text-decoration-none">Learn more</a>
+          <a href="https://github.com/OWASP/railsgoat/wiki" target="_blank" class="text-warning fw-semibold text-decoration-none">Learn more →</a>
         </div>
       </div>
     </div>
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index 24c6c79..3baf9af 100755
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -1,36 +1,119 @@
-<div class="row-fluid">
-  <div class="span12">
+<div class="rg-login-wrapper">
+  <div class="rg-login-card" style="max-width: 500px;">
+    <div class="rg-login-header">
+      <div class="rg-login-logo">
+        <i class="bi bi-person-plus-fill"></i>
+      </div>
+      <h2 class="mb-1">Create Account</h2>
+      <p class="text-muted mb-0">Join the MetaCorp team</p>
+    </div>
 
-        <div class="row-fluid">
-          <div class="span4 offset4">
-            <div class="signup">
-      <%= form_for @user, :html => {:id => "account_edit", :class=> "signup-wrapper"} do |f| %>
-          <div class="header">
-            <h2>Sign Up</h2>
-            <p>Fill out the form below to login</p>
-           </div>
-          <div class="content">
-            <%= f.text_field :email, {:class => "input input-block-level", :placeholder => "Email"} %>
-            <%= f.text_field :first_name, {:class => "input input-block-level", :placeholder => "First Name"} %>
-            <%= f.text_field :last_name, {:class => "input input-block-level", :placeholder => "Last Name"} %>
-            <div class="control-group">
-              <%= f.password_field :password, {:class => "input input-block-level", :placeholder => "Password (at least six characters)"}%>
-            </div>
-            <div class="control-group">
-                <%= f.password_field :password_confirmation, {:class => "input input-block-level", :placeholder => "Confirm Password"}%>
-            </div>
-          </div>
-          <div class="actions">
-            <%= f.submit "Submit", {:id => 'submit_button', :class => "btn btn-info btn-large pull-right"} %>
-          </div>
-          <div class="clearfix"></div>
-      <% end %>
+    <%= form_for @user, html: { id: "account_edit", class: "needs-validation", novalidate: true } do |f| %>
+      <div class="mb-3">
+        <label for="email" class="form-label">Email Address</label>
+        <div class="input-group">
+          <span class="input-group-text"><i class="bi bi-envelope"></i></span>
+          <%= f.text_field :email, {
+            class: "form-control",
+            id: "email",
+            placeholder: "you@example.com",
+            required: true,
+            autofocus: true
+          } %>
+        </div>
+      </div>
 
-            </div>
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="first_name" class="form-label">First Name</label>
+          <div class="input-group">
+            <span class="input-group-text"><i class="bi bi-person"></i></span>
+            <%= f.text_field :first_name, {
+              class: "form-control",
+              id: "first_name",
+              placeholder: "First Name",
+              required: true
+            } %>
           </div>
         </div>
 
+        <div class="col-md-6 mb-3">
+          <label for="last_name" class="form-label">Last Name</label>
+          <div class="input-group">
+            <span class="input-group-text"><i class="bi bi-person"></i></span>
+            <%= f.text_field :last_name, {
+              class: "form-control",
+              id: "last_name",
+              placeholder: "Last Name",
+              required: true
+            } %>
+          </div>
+        </div>
+      </div>
+
+      <div class="mb-3">
+        <label for="password" class="form-label">Password</label>
+        <div class="input-group">
+          <span class="input-group-text"><i class="bi bi-lock"></i></span>
+          <%= f.password_field :password, {
+            class: "form-control",
+            id: "password",
+            placeholder: "At least 6 characters",
+            required: true,
+            minlength: 6
+          } %>
+        </div>
+        <div class="form-text">Password must be at least 6 characters long</div>
+      </div>
+
+      <div class="mb-3">
+        <label for="password_confirmation" class="form-label">Confirm Password</label>
+        <div class="input-group">
+          <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
+          <%= f.password_field :password_confirmation, {
+            class: "form-control",
+            id: "password_confirmation",
+            placeholder: "Re-enter password",
+            required: true
+          } %>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 mt-4">
+        <%= f.submit "Create Account", {
+          id: "submit_button",
+          class: "btn btn-primary btn-lg"
+        } %>
+      </div>
+
+      <hr class="my-4">
+
+      <div class="text-center">
+        <p class="text-muted mb-2">Already have an account?</p>
+        <%= link_to login_path, class: "btn btn-outline-primary" do %>
+          <i class="bi bi-box-arrow-in-right"></i> Sign in
+        <% end %>
+      </div>
+    <% end %>
+
+    <div class="mt-4 p-3 rounded" style="background: linear-gradient(135deg, rgba(6, 214, 160, 0.1), rgba(17, 138, 178, 0.1)); border: 2px solid rgba(6, 214, 160, 0.3);">
+      <div class="d-flex align-items-start">
+        <i class="bi bi-info-circle-fill me-2 mt-1" style="font-size: 1.25rem; color: var(--rg-success);"></i>
+        <div class="small">
+          <strong class="d-block mb-1">Training Environment</strong>
+          This application is intentionally vulnerable for security training purposes.
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 
-<%= javascript_include_tag "validation.js"%>
\ No newline at end of file
+<%= javascript_include_tag "validation.js" %>
+
+<style>
+  /* Override main content styling for signup page */
+  .rg-main.no-sidebar {
+    margin: 0;
+    padding: 0;
+  }
+</style>
diff --git a/db/development.sqlite3-shm b/db/development.sqlite3-shm
new file mode 100644
index 0000000..3595757
Binary files /dev/null and b/db/development.sqlite3-shm differ
diff --git a/db/development.sqlite3-wal b/db/development.sqlite3-wal
new file mode 100644
index 0000000..3c65886
Binary files /dev/null and b/db/development.sqlite3-wal differ