diff --git a/Dockerfile b/Dockerfile
index 7e405ba..76625ad 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -6,9 +6,6 @@ ENV PYTHONDONTWRITEBYTECODE 1
 ENV PYTHONUNBUFFERED 1
 ENV FLASK_APP=app
 
-# Set the working directory
-WORKDIR /app
-
 # Copy and install system dependencies
 RUN apt-get update && apt-get install -y \
     build-essential \
@@ -21,10 +18,14 @@ RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \
     apt-get install -y nodejs && \
     apt-get clean && rm -rf /var/lib/apt/lists/*
 
+# Set the working directory
+WORKDIR /app
+
 # Copy project dependencies first to improve caching
 COPY requirements.txt .
-RUN pip install --upgrade pip && pip install -r requirements.txt
 
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
 # Copy Node dependencies and install them
 COPY app/package.json .
 RUN npm install
diff --git a/app/static/assets/adey.jpg b/app/static/assets/adey.jpg
new file mode 100644
index 0000000..8487e00
Binary files /dev/null and b/app/static/assets/adey.jpg differ
diff --git a/app/static/css/main.css b/app/static/css/main.css
index 7537ef8..e2e31e0 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -706,6 +706,14 @@ video {
   height: 1.25rem;
 }
 
+.h-32 {
+  height: 8rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -718,6 +726,14 @@ video {
   width: 100%;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -738,10 +754,6 @@ video {
   flex-basis: 25%;
 }
 
-.origin-\[0\] {
-  transform-origin: 0;
-}
-
 .-translate-y-6 {
   --tw-translate-y: -1.5rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -871,9 +883,9 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
 .bg-blue-700 {
@@ -881,19 +893,24 @@ video {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
-.bg-gray-50 {
+.bg-dg-dark-blue {
   --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  background-color: rgb(17 45 50 / var(--tw-bg-opacity));
 }
 
-.bg-gray-800 {
+.bg-dg-light-blue {
   --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  background-color: rgb(37 78 88 / var(--tw-bg-opacity));
 }
 
-.bg-gray-900 {
+.bg-dg-light-grey {
   --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  background-color: rgb(110 102 88 / var(--tw-bg-opacity));
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
 .bg-transparent {
@@ -905,6 +922,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-dg-dark-grey {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 74 65 / var(--tw-bg-opacity));
+}
+
 .p-10 {
   padding: 2.5rem;
 }
@@ -942,11 +964,6 @@ video {
   padding-right: 12rem;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1064,11 +1081,6 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1106,9 +1118,9 @@ video {
   transition-duration: 300ms;
 }
 
-.hover\:bg-blue-800:hover {
+.hover\:bg-blue-700:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-gray-100:hover {
@@ -1180,10 +1192,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.peer:focus ~ .peer-focus\:start-0 {
-  inset-inline-start: 0px;
-}
-
 .peer:focus ~ .peer-focus\:-translate-y-6 {
   --tw-translate-y: -1.5rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1195,10 +1203,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.peer:focus ~ .peer-focus\:font-medium {
-  font-weight: 500;
-}
-
 .peer:focus ~ .peer-focus\:text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -1210,10 +1214,6 @@ video {
     margin-right: auto;
   }
 
-  .sm\:w-auto {
-    width: auto;
-  }
-
   .sm\:px-16 {
     padding-left: 4rem;
     padding-right: 4rem;
@@ -1249,10 +1249,6 @@ video {
     width: auto;
   }
 
-  .md\:grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1387,11 +1383,6 @@ video {
   --tw-space-x-reverse: 1;
 }
 
-.peer:focus ~ .rtl\:peer-focus\:translate-x-1\/4:where([dir="rtl"], [dir="rtl"] *) {
-  --tw-translate-x: 25%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .dark\:divide-gray-700:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-divide-opacity));
@@ -1422,6 +1413,16 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-dg-dark-blue:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 45 50 / var(--tw-bg-opacity));
+}
+
+.dark\:bg-dg-light-blue:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 78 88 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-gray-500:where(.dark, .dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -1447,11 +1448,6 @@ video {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.dark\:text-red-700:where(.dark, .dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
-
 .dark\:text-white:where(.dark, .dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1493,9 +1489,9 @@ video {
 }
 
 @media (min-width: 768px) {
-  .md\:dark\:bg-slate-700:where(.dark, .dark *) {
+  .md\:dark\:bg-dg-light-blue:where(.dark, .dark *) {
     --tw-bg-opacity: 1;
-    background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+    background-color: rgb(37 78 88 / var(--tw-bg-opacity));
   }
 
   .md\:dark\:text-blue-500:where(.dark, .dark *) {
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index 484d6e8..2aabde1 100644
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -17,6 +17,11 @@ module.exports = {
         merriweather: ['Merriweather', 'serif'],
       },
       colors: {
+        'dg-blue': '#88BDBC',
+        'dg-light-blue': '#254E58',
+        'dg-dark-blue': '#112D32',
+        'dg-dark-grey': '#4F4A41',
+        'dg-light-grey': '#6E6658',
         'tedo-dark-blue': '#080F5B',
         'tedo-blue': '#0D19A3',
         'tedo-light-green': '#15DB95',
diff --git a/app/templates/_footer.html b/app/templates/_footer.html
index 421c85b..51fb527 100644
--- a/app/templates/_footer.html
+++ b/app/templates/_footer.html
@@ -1,6 +1,6 @@
 
 
-<footer class="bg-white rounded-lg shadow dark:bg-slate-700 m-4 ">
+<footer class="bg-white rounded-lg shadow dark:bg-dg-light-blue m-4 ">
     <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8 font-merriweather">
         
         <hr class="my-6 border-gray-200 sm:mx-auto dark:border-white lg:my-8" />
diff --git a/app/templates/_navigation.html b/app/templates/_navigation.html
index e599d77..b72d420 100644
--- a/app/templates/_navigation.html
+++ b/app/templates/_navigation.html
@@ -1,8 +1,8 @@
 <header>
-    <nav class="bg-white font-merriweather dark:bg-slate-700 fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-white">
+    <nav class="font-merriweather bg-dg-light-blue fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-white">
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
             <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
-                <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Fraud AI</span>
+                <img src="static/assets/adey.jpg" alt="Adey Innovations Inc log" class="w-10 h-10" />
             </a>
             <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
                 <button data-collapse-toggle="navbar-sticky" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-sticky" aria-expanded="false">
@@ -13,7 +13,7 @@
                 </button>
             </div>
             <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
-                <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-slate-700 md:dark:bg-slate-700 dark:border-slate-600">
+                <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-slate-700 md:dark:bg-dg-light-blue dark:border-slate-600">
                 <li>
                     <a href="/" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page">Home</a>
                 </li>
diff --git a/app/templates/base.html b/app/templates/base.html
index 17ced91..a70083b 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -10,7 +10,7 @@
 
     <body>
         {% include("_navigation.html") %}
-        <main class="dark:bg-slate-700 font-merriweather">
+        <main class="dark:bg-dg-light-blue font-merriweather">
             {% block content %}<p>No messages.</p>{% endblock content %}
             {% include("_footer.html") %}
         </main>
diff --git a/app/templates/pages/home.html b/app/templates/pages/home.html
index c70eee3..3ebc4fc 100644
--- a/app/templates/pages/home.html
+++ b/app/templates/pages/home.html
@@ -6,13 +6,13 @@
 
 <section class="pt-32 lg:px-20">
     <div class="flex flex-col justify-center">
-        <h1 class="mb-4 text-4xl font-extrabold font-montserrat leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl xl:px-32 dark:text-white">Fraud Detection in Finance</h1>
+        <h1 class="mb-4 text-4xl font-extrabold font-montserrat leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl xl:px-32 dark:text-white">Adey Innovations Inc</h1>
     </div>
 </section>
 <section class="py-8 lg:px-20">
     <div class="flex flex-col justify-center">
-        <h1 class="mb-4 text-xl font-extrabold font-montserrat leading-none tracking-tight md:text-2xl lg:text-4xl xl:px-48 text-white">Dataset Description</h1>
-        <p class="mb-6 text-lg font-normal text-white lg:text-xl sm:px-16 xl:px-48">A comprehensive resource designed for training and evaluating machine learning models in the context of financial fraud detection. It combines data from various sources, including transaction records, customer profiles, fraudulent patterns, transaction amounts, and merchant information, into a single dataset with the shape (1000, 14). This consolidated dataset facilitates the development of robust fraud detection models by providing rich, diverse features necessary for identifying and predicting fraudulent activities. It serves as an invaluable tool for researchers, data scientists, and analysts aiming to advance fraud detection methodologies. <a href="https://www.kaggle.com/datasets/goyaladi/fraud-detection-dataset" target="_blank" class="text-blue-400">Kaggle</a></p>
+        <h1 class="mb-4 text-xl font-extrabold font-montserrat leading-none tracking-tight md:text-2xl lg:text-4xl xl:px-48 text-white">Enhancing Financial Security with Advanced AI Fraud Detection</h1>
+        <p class="mb-6 text-lg font-normal text-white lg:text-xl sm:px-16 xl:px-48"> At <b>Adey Innovations Inc.,</b> we're redefining financial security with state-of-the-art fraud detection solutions for e-commerce and banking. Our platform leverages the power of advanced machine learning models, geolocation analysis, and transaction pattern recognition to accurately identify fraudulent activities and protect businesses from financial threats. Designed to handle the unique challenges of both online and bank credit transactions, our system offers real-time monitoring and reporting, empowering businesses to act swiftly and minimize risks. By integrating cutting-edge technology with seamless user experience, Adey Innovations Inc. is committed to building trust, preventing financial losses, and leading the future of secure financial technology for businesses and institutions worldwide.</p>
     </div>
 </section>
 
diff --git a/app/templates/transactions/create.html b/app/templates/transactions/create.html
index 06e2799..bb57dbf 100644
--- a/app/templates/transactions/create.html
+++ b/app/templates/transactions/create.html
@@ -7,12 +7,16 @@
         <div class="flex justify-center">
             <h1 class="mb-4 text-xl font-extrabold leading-none tracking-tight text-gray-900 md:text-2xl lg:text-3xl dark:text-white">Create New Transaction</h1>
         </div>
-        <form class="max-w-md mx-auto p-10 shadow-xl shadow-white bg-gray-900 rounded-xl" action="/create" method="post">
+        <form class="max-w-md mx-auto p-10 shadow-xl shadow-white bg-dg-dark-blue rounded-xl" action="/create" method="post">
             <div class="grid md:grid-cols-2 md:gap-6">
                 <div class="relative z-0 w-full mb-5 group">
                     <input type="text" name="user_id" id="user_id" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
                     <label for="user_id" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">User ID</label>
                 </div>
+                <div class="relative z-0 w-full mb-5 group">
+                    <input type="text" name="ip_address" id="ip_address" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
+                    <label for="ip_address" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">IP Address</label>
+                </div>
             </div>
             <div class="grid md:grid-cols-2 md:gap-6">
                 <div class="relative z-0 w-full mb-5 group">
@@ -44,12 +48,6 @@ <h1 class="mb-4 text-xl font-extrabold leading-none tracking-tight text-gray-900
                     <label for="purchase_value" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Purchase Value</label>
                 </div>
             </div>
-            <div class="grid md:grid-cols-2 md:gap-6">
-                <div class="relative z-0 w-full mb-5 group">
-                    <input type="text" name="ip_address" id="ip_address" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
-                    <label for="ip_address" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">IP Address</label>
-                </div>
-            </div>
             <div class="grid md:grid-cols-2 md:gap-6">
                 <div class="relative z-0 w-full mb-5 group">
                     <input type="number" name="lower_bound_ip_address" id="lower_bound_ip_address" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
@@ -65,16 +63,16 @@ <h1 class="mb-4 text-xl font-extrabold leading-none tracking-tight text-gray-900
                     <input type="text" name="country" id="country" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
                     <label for="country" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Country</label>
                 </div>
-                <div class="relative z-0 w-full mb-5 group">
-                    <input type="datetime-local" name="signup_time" id="signup_time" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
-                    <label for="signup_time" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Signup Time</label>
-                </div>
             </div>
             <div class="grid md:grid-cols-2 md:gap-6">
                 <div class="relative z-0 w-full mb-5 group">
                     <input type="datetime-local" name="purchase_time" id="purchase_time" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
                     <label for="purchase_time" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Purchase Time</label>
                 </div>
+                <div class="relative z-0 w-full mb-5 group">
+                    <input type="datetime-local" name="signup_time" id="signup_time" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
+                    <label for="signup_time" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Signup Time</label>
+                </div>
             </div>
             <button type="submit" class="w-full py-2.5 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
         </form>
diff --git a/app/templates/transactions/history.html b/app/templates/transactions/history.html
index 067754b..91e6104 100644
--- a/app/templates/transactions/history.html
+++ b/app/templates/transactions/history.html
@@ -8,7 +8,7 @@
     <div class="flex justify-center">
         <h1 class="mb-4 text-xl font-extrabold leading-none tracking-tight text-gray-900 md:text-2xl lg:text-3xl xl:px-48 dark:text-white">Transaction History</h1>
     </div>
-    <table border="1" class="text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-md rounded-lg overflow-hidden mx-auto">
+    <table border="1" class="text-sm bg-white dark:bg-dg-dark-blue text-gray-900 dark:text-gray-100 shadow-md rounded-lg overflow-hidden mx-auto">
         <tr>
             <th class="px-2 py-2 border-b border-gray-200 dark:border-gray-700">User ID</th>
             <th class="px-2 py-2 border-b border-gray-200 dark:border-gray-700">Signup Time</th>