diff --git a/app/models/transaction.rb b/app/models/transaction.rb
index 8525157a..f3e2269b 100644
--- a/app/models/transaction.rb
+++ b/app/models/transaction.rb
@@ -22,7 +22,11 @@ def time
   end
 
   def signed_amount(account)
-    sign = from_account == account ? '-' : '+'
+    sign = negative?(account) ? '-' : '+'
     "#{sign}#{amount}"
   end
+
+  def negative?(account)
+    from_account == account
+  end
 end
diff --git a/app/views/transactions_mailer/transaction_notification.html.erb b/app/views/transactions_mailer/transaction_notification.html.erb
index e0b543d6..2f7dab4b 100644
--- a/app/views/transactions_mailer/transaction_notification.html.erb
+++ b/app/views/transactions_mailer/transaction_notification.html.erb
@@ -1,21 +1,108 @@
-<h1>New transaction was added in <%= @account.name %>!</h1>
-<h3>About transation:</h3>
-<p>Amount: <%= @transaction.signed_amount(@account) %> </p>
-<p>Description: <%= @transaction.description %> </p>
-<p>Current balance: <%= @account.balance %> </p>
-<br>
-<h3> Last 5 transactions: </h3>
-<table>
-  <tr>
-    <th>Date</th>
-    <th>Amount</th>
-    <th>Description</th>
-  </tr>
-  <% @transactions.each do |transaction|%>
+<div class="container">
+  <h1>Transaction added to <%= @account.name %></h1>
+  <div class="about">
+    <div>
+      <b>Amount: </b>
+      <b class="<%= @transaction.negative?(@account) ? 'negative' : 'positive' %>"><%= @transaction.signed_amount(@account) %></b>
+    </div>
+    <b>Description: <%= @transaction.description %></b>
+    <b>Current balance: <%= @account.balance %></b>
+  </div>
+  <h2>Last 5 transactions:</h2>
+  <table>
     <tr>
-      <th><%= transaction.date %></th>
-      <th><%= transaction.signed_amount(@account) %></th>
-      <th><%= transaction.description %></th>
+      <th>Date</th>
+      <th>Amount</th>
+      <th>Description</th>
     </tr>
-  <% end %>
-</table>
+    <% @transactions.each do |transaction|%>
+      <tr>
+        <th><%= transaction.date %></th>
+        <th class="<%= transaction.negative?(@account) ? 'negative' : 'positive' %>"><%= transaction.signed_amount(@account) %></th>
+        <th><%= transaction.description %></th>
+      </tr>
+    <% end %>
+  </table>
+  <b><%= link_to "See More details",  account_url(@account) %></b>
+</div>
+
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #FEF9FF;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .container {
+    background-color: white;
+    min-width: 60%;
+    box-shadow: 0 0.1em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
+    border-radius: 12px;
+    margin: 1.5rem;
+    padding: 5rem;
+  }
+
+  .about {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .about b, div {
+    margin-bottom: 1rem;
+  }
+
+  .negative {
+    color: hsl(8, 82%, 41%);
+  }
+
+  .positive {
+    color: hsla(145, 73%, 38%, 1);
+  }
+
+  h1 {
+    margin-bottom: 3rem;
+  }
+
+  h1, h2 {
+    color: rebeccapurple;
+  }
+
+  table {
+    min-width: 100%;
+    border-collapse: collapse;
+    margin: 10px 0 30px;
+  }
+
+  th, th {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+    min-width: 90px;
+  }
+
+  th:first-child, td:first-child,
+  th:nth-child(2), td:nth-child(2) {
+    width: 15%;
+  }
+
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+
+  tr:nth-child(odd) {
+    background-color: #f2f2f2;
+  }
+
+  a {
+    color: rebeccapurple;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: #333;
+    text-decoration: none;
+  }
+</style>