diff --git a/company/templates/company/company_analytics.html b/company/templates/company/company_analytics.html
index 216320693..a681749f8 100644
--- a/company/templates/company/company_analytics.html
+++ b/company/templates/company/company_analytics.html
@@ -1,24 +1,21 @@
-{% extends 'company/company_dashboard_base.html' %} 
-{% load static %} 
-{% block title %} Company Analytics {% endblock title %} 
+{% extends 'company/company_dashboard_base.html' %}
+{% load static %}
+{% block title %} Company Analytics {% endblock title %}
 
 {% block body %}
 
-<div class="bg-[#F3F5F7]">
+<div class="bg-[#F3F5F7] pb-10">
   <div class="w-full mt-5">
     <p class="text-red-700 font-satoshi font-bold text-[35px] px-8">
       Dashboard
     </p>
   </div>
-  
-  <div class="flex flex-wrap justify-between w-full px-8 mt-4 items-center">
+
+  <div class="flex flex-col lg:flex-row gap-5 justify-center lg:justify-between w-full gap-y-4 px-8 mt-4 items-center">
     <div
-      class="flex justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all"
-    >
+      class="flex justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all">
       <div class="flex justify-evenly items-center w-[100%] h-[70%]">
-        <div
-          class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]"
-        >
+        <div class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]">
           <i class="fa-solid fa-bug fa-2x text-black"></i>
         </div>
 
@@ -32,12 +29,9 @@
     </div>
 
     <div
-      class="m-2 flex flex-wrap justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all"
-    >
+      class="flex flex-wrap justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all">
       <div class="flex justify-evenly items-center w-[100%] h-[70%]">
-        <div
-          class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]"
-        >
+        <div class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]">
           <i class="fa-sharp fa-solid fa-flag fa-2x text-black"></i>
         </div>
 
@@ -51,12 +45,9 @@
     </div>
 
     <div
-      class="m-2 flex flex-wrap justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all"
-    >
+      class="flex flex-wrap justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all">
       <div class="flex justify-evenly items-center w-[100%] h-[70%]">
-        <div
-          class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]"
-        >
+        <div class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]">
           <i class="fa-sharp fa-solid fa-globe fa-2x text-black"></i>
         </div>
 
@@ -70,12 +61,9 @@
     </div>
 
     <div
-      class="m-0 flex flex-wrap justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all"
-    >
+      class="flex flex-wrap justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all">
       <div class="flex justify-evenly items-center w-[100%] h-[70%]">
-        <div
-          class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]"
-        >
+        <div class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]">
           <i class="fa-sharp fa-solid fa-dollar-sign fa-2x text-black"></i>
         </div>
 
@@ -89,10 +77,10 @@
     </div>
   </div>
 
-  <div class="bottom-container">
-    <div class="bottom-container__left">
-      <div class="box total-box bg-[#F3F5F7] justify-between h-[600px] p-0">
-        <div class="box spending-box w-[49%]">
+  <div class="flex flex-col lg:flex-row gap-y-5 mt-4">
+    <div class="flex flex-col px-8  gap-5 ">
+      <div class="flex flex-col lg:flex-row gap-5 bg-[#F3F5F7]">
+        <div class="bg-white p-5 rounded-xl lg:w-[60vh]">
           <div class="header-container">
             <h3 class="section-header">Bug Reported Type</h3>
           </div>
@@ -100,7 +88,7 @@ <h3 class="section-header">Bug Reported Type</h3>
             <canvas id="bugTypePie" height="220px" width="660px"></canvas>
           </div>
         </div>
-        <div class="box spending-box w-[49%]">
+        <div class="bg-white p-5 rounded-xl lg:w-[60vh]">
           <div class="header-container">
             <h3 class="section-header">Reported on Domains</h3>
           </div>
@@ -110,238 +98,101 @@ <h3 class="section-header">Reported on Domains</h3>
         </div>
       </div>
 
-      <div class="box spending-box">
-        <div class="header-container">
-          <h3 class="section-header">Monthly Reports</h3>
-          <div class="year-selector">
-            <svg
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect
-                opacity="0.8"
-                width="24"
-                height="24"
-                rx="6"
-                fill="#F6F7F9"
-              />
-              <path
-                d="M13.4999 15.96L10.2399 12.7C9.85492 12.315 9.85492 11.685 10.2399 11.3L13.4999 8.04004"
-                stroke="#1A202C"
-                stroke-width="1.5"
-                stroke-miterlimit="10"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-            <span>2023</span>
-            <svg
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect
-                opacity="0.8"
-                width="24"
-                height="24"
-                rx="6"
-                fill="#F6F7F9"
-              />
-              <path
-                d="M10.4551 15.96L13.7151 12.7C14.1001 12.315 14.1001 11.685 13.7151 11.3L10.4551 8.04004"
-                stroke="#1A202C"
-                stroke-width="1.5"
-                stroke-miterlimit="10"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </div>
+      <div class="bg-white p-5 rounded-xl w-full lg:w-[123vh]">
+        <h3 class="section-header">Monthly Reports</h3>
+        <div class="year-selector">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect opacity="0.8" width="24" height="24" rx="6" fill="#F6F7F9" />
+            <path d="M13.4999 15.96L10.2399 12.7C9.85492 12.315 9.85492 11.685 10.2399 11.3L13.4999 8.04004"
+              stroke="#1A202C" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
+              stroke-linejoin="round" />
+          </svg>
+          <span>2023</span>
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect opacity="0.8" width="24" height="24" rx="6" fill="#F6F7F9" />
+            <path d="M10.4551 15.96L13.7151 12.7C14.1001 12.315 14.1001 11.685 13.7151 11.3L10.4551 8.04004"
+              stroke="#1A202C" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
+              stroke-linejoin="round" />
+          </svg>
         </div>
         <div class="bar-chart">
           <canvas id="myChart" height="220px" width="660px"></canvas>
         </div>
       </div>
-      <div class="box total-box">
-        <div class="total-box__left">
+      <div class="p-5 bg-white rounded-xl flex lg:flex-row lg:w-[123vh]">
+        <div class="w-full">
           <div class="header-container">
             <h3 class="section-header">Total Reported</h3>
 
             {% if bug_rate_increase_descrease_weekly.is_increasing %}
 
-            <svg
-              class="up-arrow"
-              width="42"
-              height="42"
-              viewBox="0 0 42 42"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
+            <svg class="up-arrow" width="42" height="42" viewBox="0 0 42 42" fill="none"
+              xmlns="http://www.w3.org/2000/svg">
               <rect width="42" height="42" rx="8" fill="#F6F7F9" />
-              <path
-                d="M27.0702 18.57L21.0002 12.5L14.9302 18.57"
-                stroke="#7FB519"
-                stroke-width="2"
-                stroke-miterlimit="10"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M21 29.5V12.67"
-                stroke="#7FB519"
-                stroke-width="2"
-                stroke-miterlimit="10"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+              <path d="M27.0702 18.57L21.0002 12.5L14.9302 18.57" stroke="#7FB519" stroke-width="2"
+                stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M21 29.5V12.67" stroke="#7FB519" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
+                stroke-linejoin="round" />
             </svg>
 
             {% else %}
 
-            <svg
-              width="42"
-              height="42"
-              viewBox="0 0 42 42"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
+            <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
               <rect width="42" height="42" rx="8" fill="#F6F7F9" />
-              <path
-                d="M27.0702 23.43L21.0002 29.5L14.9302 23.43"
-                stroke="#FF4423"
-                stroke-width="2"
-                stroke-miterlimit="10"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M21 12.5V29.33"
-                stroke="#FF4423"
-                stroke-width="2"
-                stroke-miterlimit="10"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+              <path d="M27.0702 23.43L21.0002 29.5L14.9302 23.43" stroke="#FF4423" stroke-width="2"
+                stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M21 12.5V29.33" stroke="#FF4423" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
+                stroke-linejoin="round" />
             </svg>
 
             {% endif %}
           </div>
           <h1 class="price">
-            {{bug_rate_increase_descrease_weekly.this_week_issue_count}}<span
-              class="price-currency"
-              >Bugs</span
-            >
+            {{bug_rate_increase_descrease_weekly.this_week_issue_count}}<span class="price-currency">Bugs</span>
           </h1>
           <p>
-            <span
-              {%
-              if
-              bug_rate_increase_descrease_weekly.is_increasing
-              %}
-              class="percentage-increase"
-              {%
-              else
-              %}
-              class="percentage-decrease"
-              {%
-              endif
-              %}
-            >
+            <span {% if bug_rate_increase_descrease_weekly.is_increasing %} class="percentage-increase" {% else %}
+              class="percentage-decrease" {% endif %}>
               {{bug_rate_increase_descrease_weekly.percent_increase}}%
             </span>
             {% if bug_rate_increase_descrease_weekly.is_increasing %} Increasing
             {% else %} Decreasing {% endif %} compared to last week
           </p>
         </div>
-        <div class="total-box__right">
+        <div class="w-full">
           <div class="header-container">
             <h3 class="section-header">Accepted Bugs</h3>
 
             {% if accepted_bug_rate_increase_descrease_weekly.is_increasing %}
 
-            <svg
-              class="up-arrow"
-              width="42"
-              height="42"
-              viewBox="0 0 42 42"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
+            <svg class="up-arrow" width="42" height="42" viewBox="0 0 42 42" fill="none"
+              xmlns="http://www.w3.org/2000/svg">
               <rect width="42" height="42" rx="8" fill="#F6F7F9" />
-              <path
-                d="M27.0702 18.57L21.0002 12.5L14.9302 18.57"
-                stroke="#7FB519"
-                stroke-width="2"
-                stroke-miterlimit="10"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M21 29.5V12.67"
-                stroke="#7FB519"
-                stroke-width="2"
-                stroke-miterlimit="10"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+              <path d="M27.0702 18.57L21.0002 12.5L14.9302 18.57" stroke="#7FB519" stroke-width="2"
+                stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M21 29.5V12.67" stroke="#7FB519" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
+                stroke-linejoin="round" />
             </svg>
 
             {% else %}
 
-            <svg
-              width="42"
-              height="42"
-              viewBox="0 0 42 42"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
+            <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
               <rect width="42" height="42" rx="8" fill="#F6F7F9" />
-              <path
-                d="M27.0702 23.43L21.0002 29.5L14.9302 23.43"
-                stroke="#FF4423"
-                stroke-width="2"
-                stroke-miterlimit="10"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M21 12.5V29.33"
-                stroke="#FF4423"
-                stroke-width="2"
-                stroke-miterlimit="10"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+              <path d="M27.0702 23.43L21.0002 29.5L14.9302 23.43" stroke="#FF4423" stroke-width="2"
+                stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M21 12.5V29.33" stroke="#FF4423" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
+                stroke-linejoin="round" />
             </svg>
 
             {% endif %}
           </div>
           <h1 class="price">
-            {{accepted_bug_rate_increase_descrease_weekly.this_week_issue_count}}<span
-              class="price-currency"
-              >Accepted Bugs</span
-            >
+            {{accepted_bug_rate_increase_descrease_weekly.this_week_issue_count}}<span class="price-currency">Accepted
+              Bugs</span>
           </h1>
           <p>
-            <span
-              {%
-              if
-              accepted_bug_rate_increase_descrease_weekly.is_increasing
-              %}
-              class="percentage-increase"
-              {%
-              else
-              %}
-              class="percentage-decrease"
-              {%
-              endif
-              %}
-            >
+            <span {% if accepted_bug_rate_increase_descrease_weekly.is_increasing %} class="percentage-increase" {% else
+              %} class="percentage-decrease" {% endif %}>
               {{accepted_bug_rate_increase_descrease_weekly.percent_increase}}%
             </span>
             {% if accepted_bug_rate_increase_descrease_weekly.is_increasing %}
@@ -471,359 +322,277 @@ <h3 class="section-header">Transaction History</h3>
                         </table>
                     </div>                    -->
     </div>
-    
-    <div class="bottom-container__right ml-10">
-      <div class="box">
-        <div class="header-container">
-          <h3 class="section-header">Your balance</h3>
-          <svg
-            width="24"
-            height="25"
-            viewBox="0 0 24 25"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M5 10.4166C3.9 10.4166 3 11.3541 3 12.5C3 13.6458 3.9 14.5833 5 14.5833C6.1 14.5833 7 13.6458 7 12.5C7 11.3541 6.1 10.4166 5 10.4166Z"
-              stroke="#1A202C"
-              stroke-width="1.5"
-            />
-            <path
-              d="M19 10.4166C17.9 10.4166 17 11.3541 17 12.5C17 13.6458 17.9 14.5833 19 14.5833C20.1 14.5833 21 13.6458 21 12.5C21 11.3541 20.1 10.4166 19 10.4166Z"
-              stroke="#1A202C"
-              stroke-width="1.5"
-            />
-            <path
-              d="M12 10.4166C10.9 10.4166 10 11.3541 10 12.5C10 13.6458 10.9 14.5833 12 14.5833C13.1 14.5833 14 13.6458 14 12.5C14 11.3541 13.1 10.4166 12 10.4166Z"
-              stroke="#1A202C"
-              stroke-width="1.5"
-            />
-          </svg>
-        </div>
-        <h1 class="price">
-          $120,435.00<span class="price-currency">(USD)</span>
-        </h1>
-        <p>From Jan 01, 2022 to Jan 31, 2022</p>
-        <div class="button-box">
-          <button class="btn btn-purple">
-            <svg
-              width="23"
-              height="23"
-              viewBox="0 0 23 23"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.104 13.1771C9.104 14.1066 9.82277 14.8541 10.7044 14.8541H12.5061C13.2727 14.8541 13.8957 14.2025 13.8957 13.3879C13.8957 12.5158 13.5123 12.1996 12.9469 11.9983L10.0623 10.9921C9.49692 10.7908 9.1136 10.4841 9.1136 9.60248C9.1136 8.79748 9.7365 8.13623 10.5032 8.13623H12.3048C13.1865 8.13623 13.9053 8.88373 13.9053 9.81331"
-                stroke="white"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M11.5 7.1875V15.8125"
-                stroke="white"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+      <div class="mx-5 flex flex-col gap-5 lg:w-[60vh]">
+        <div class="rounded-xl bg-white p-5">
+          <div class="header-container">
+            <h3 class="section-header">Your balance</h3>
+            <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
-                d="M21.0832 11.5C21.0832 16.79 16.7898 21.0833 11.4998 21.0833C6.20984 21.0833 1.9165 16.79 1.9165 11.5C1.9165 6.20996 6.20984 1.91663 11.4998 1.91663"
-                stroke="white"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+                d="M5 10.4166C3.9 10.4166 3 11.3541 3 12.5C3 13.6458 3.9 14.5833 5 14.5833C6.1 14.5833 7 13.6458 7 12.5C7 11.3541 6.1 10.4166 5 10.4166Z"
+                stroke="#1A202C" stroke-width="1.5" />
               <path
-                d="M16.2915 2.875V6.70833H20.1248"
-                stroke="white"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+                d="M19 10.4166C17.9 10.4166 17 11.3541 17 12.5C17 13.6458 17.9 14.5833 19 14.5833C20.1 14.5833 21 13.6458 21 12.5C21 11.3541 20.1 10.4166 19 10.4166Z"
+                stroke="#1A202C" stroke-width="1.5" />
               <path
-                d="M21.0832 1.91663L16.2915 6.70829"
-                stroke="white"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+                d="M12 10.4166C10.9 10.4166 10 11.3541 10 12.5C10 13.6458 10.9 14.5833 12 14.5833C13.1 14.5833 14 13.6458 14 12.5C14 11.3541 13.1 10.4166 12 10.4166Z"
+                stroke="#1A202C" stroke-width="1.5" />
             </svg>
-            <span>Top Up</span>
-          </button>
-          <button class="btn btn-white">
-            <svg
-              width="23"
-              height="23"
-              viewBox="0 0 23 23"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.104 13.1771C9.104 14.1066 9.82277 14.8541 10.7044 14.8541H12.5061C13.2727 14.8541 13.8957 14.2025 13.8957 13.3879C13.8957 12.5158 13.5123 12.1996 12.9469 11.9983L10.0623 10.9921C9.49692 10.7908 9.1136 10.4841 9.1136 9.60248C9.1136 8.79748 9.7365 8.13623 10.5032 8.13623H12.3048C13.1865 8.13623 13.9053 8.88373 13.9053 9.81331"
-                stroke="#1A202C"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M11.5 7.1875V15.8125"
-                stroke="#1A202C"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+          </div>
+          <h1 class="price">
+            $120,435.00<span class="price-currency">(USD)</span>
+          </h1>
+          <p>From Jan 01, 2022 to Jan 31, 2022</p>
+          <div class="button-box">
+            <button class="btn btn-purple">
+              <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M9.104 13.1771C9.104 14.1066 9.82277 14.8541 10.7044 14.8541H12.5061C13.2727 14.8541 13.8957 14.2025 13.8957 13.3879C13.8957 12.5158 13.5123 12.1996 12.9469 11.9983L10.0623 10.9921C9.49692 10.7908 9.1136 10.4841 9.1136 9.60248C9.1136 8.79748 9.7365 8.13623 10.5032 8.13623H12.3048C13.1865 8.13623 13.9053 8.88373 13.9053 9.81331"
+                  stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M11.5 7.1875V15.8125" stroke="white" stroke-width="1.5" stroke-linecap="round"
+                  stroke-linejoin="round" />
+                <path
+                  d="M21.0832 11.5C21.0832 16.79 16.7898 21.0833 11.4998 21.0833C6.20984 21.0833 1.9165 16.79 1.9165 11.5C1.9165 6.20996 6.20984 1.91663 11.4998 1.91663"
+                  stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M16.2915 2.875V6.70833H20.1248" stroke="white" stroke-width="1.5" stroke-linecap="round"
+                  stroke-linejoin="round" />
+                <path d="M21.0832 1.91663L16.2915 6.70829" stroke="white" stroke-width="1.5" stroke-linecap="round"
+                  stroke-linejoin="round" />
+              </svg>
+              <span>Top Up</span>
+            </button>
+            <button class="btn btn-white">
+              <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M9.104 13.1771C9.104 14.1066 9.82277 14.8541 10.7044 14.8541H12.5061C13.2727 14.8541 13.8957 14.2025 13.8957 13.3879C13.8957 12.5158 13.5123 12.1996 12.9469 11.9983L10.0623 10.9921C9.49692 10.7908 9.1136 10.4841 9.1136 9.60248C9.1136 8.79748 9.7365 8.13623 10.5032 8.13623H12.3048C13.1865 8.13623 13.9053 8.88373 13.9053 9.81331"
+                  stroke="#1A202C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M11.5 7.1875V15.8125" stroke="#1A202C" stroke-width="1.5" stroke-linecap="round"
+                  stroke-linejoin="round" />
+                <path
+                  d="M21.0832 11.5C21.0832 16.79 16.7898 21.0833 11.4998 21.0833C6.20984 21.0833 1.9165 16.79 1.9165 11.5C1.9165 6.20996 6.20984 1.91663 11.4998 1.91663"
+                  stroke="#1A202C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M21.0833 5.74996V1.91663H17.25" stroke="#1A202C" stroke-width="1.5" stroke-linecap="round"
+                  stroke-linejoin="round" />
+                <path d="M16.2915 6.70829L21.0832 1.91663" stroke="#1A202C" stroke-width="1.5" stroke-linecap="round"
+                  stroke-linejoin="round" />
+              </svg>
+              <span>Transfer</span>
+            </button>
+          </div>
+        </div>
+        <div class="box spending-box">
+          <div class="header-container">
+            <h3 class="section-header">Spent On Bug Types</h3>
+            <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
-                d="M21.0832 11.5C21.0832 16.79 16.7898 21.0833 11.4998 21.0833C6.20984 21.0833 1.9165 16.79 1.9165 11.5C1.9165 6.20996 6.20984 1.91663 11.4998 1.91663"
-                stroke="#1A202C"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+                d="M5 10.4166C3.9 10.4166 3 11.3541 3 12.5C3 13.6458 3.9 14.5833 5 14.5833C6.1 14.5833 7 13.6458 7 12.5C7 11.3541 6.1 10.4166 5 10.4166Z"
+                stroke="#1A202C" stroke-width="1.5" />
               <path
-                d="M21.0833 5.74996V1.91663H17.25"
-                stroke="#1A202C"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+                d="M19 10.4166C17.9 10.4166 17 11.3541 17 12.5C17 13.6458 17.9 14.5833 19 14.5833C20.1 14.5833 21 13.6458 21 12.5C21 11.3541 20.1 10.4166 19 10.4166Z"
+                stroke="#1A202C" stroke-width="1.5" />
               <path
-                d="M16.2915 6.70829L21.0832 1.91663"
-                stroke="#1A202C"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+                d="M12 10.4166C10.9 10.4166 10 11.3541 10 12.5C10 13.6458 10.9 14.5833 12 14.5833C13.1 14.5833 14 13.6458 14 12.5C14 11.3541 13.1 10.4166 12 10.4166Z"
+                stroke="#1A202C" stroke-width="1.5" />
             </svg>
-            <span>Transfer</span>
-          </button>
-        </div>
-      </div>
-      <div class="box spending-box">
-        <div class="header-container">
-          <h3 class="section-header">Spent On Bug Types</h3>
-          <svg
-            width="24"
-            height="25"
-            viewBox="0 0 24 25"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M5 10.4166C3.9 10.4166 3 11.3541 3 12.5C3 13.6458 3.9 14.5833 5 14.5833C6.1 14.5833 7 13.6458 7 12.5C7 11.3541 6.1 10.4166 5 10.4166Z"
-              stroke="#1A202C"
-              stroke-width="1.5"
-            />
-            <path
-              d="M19 10.4166C17.9 10.4166 17 11.3541 17 12.5C17 13.6458 17.9 14.5833 19 14.5833C20.1 14.5833 21 13.6458 21 12.5C21 11.3541 20.1 10.4166 19 10.4166Z"
-              stroke="#1A202C"
-              stroke-width="1.5"
-            />
-            <path
-              d="M12 10.4166C10.9 10.4166 10 11.3541 10 12.5C10 13.6458 10.9 14.5833 12 14.5833C13.1 14.5833 14 13.6458 14 12.5C14 11.3541 13.1 10.4166 12 10.4166Z"
-              stroke="#1A202C"
-              stroke-width="1.5"
-            />
-          </svg>
-        </div>
-        <div class="pie-chart">
-          <canvas id="spentOnBugTypes" height="220px" width="220px"></canvas>
-        </div>
+          </div>
+          <div class="pie-chart">
+            <canvas id="spentOnBugTypes" height="220px" width="220px"></canvas>
+          </div>
 
-        <div class="overall-spending">
-          <h4>Total Spent</h4>
-          <span>${{ total_info.total_money_distributed }}</span>
-        </div>
-        <div class="pie-chart__labels">
-          {% for bugtype, money_spent in spent_on_bugtypes.zipped_data %}
+          <div class="overall-spending">
+            <h4>Total Spent</h4>
+            <span>${{ total_info.total_money_distributed }}</span>
+          </div>
+          <div class="pie-chart__labels">
+            {% for bugtype, money_spent in spent_on_bugtypes.zipped_data %}
             <div class="pie-chart__labels-item">
-                <div class="label">
+              <div class="label">
                 <div class="label__color first"></div>
                 {{ bugtype }}
-                </div>
-                ${{ money_spent }}
+              </div>
+              ${{ money_spent }}
             </div>
-          {% endfor %}
+            {% endfor %}
+          </div>
         </div>
       </div>
     </div>
-  </div>
 </div>
 {% endblock body %}
 
 {% block js %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js" integrity="sha384-+94tm/qgImqyuSRr1vU2PjQIoot8h3qdaFB/xTawzWLRkcCWPricrBj5Xr45hCP1" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js"
+  integrity="sha384-+94tm/qgImqyuSRr1vU2PjQIoot8h3qdaFB/xTawzWLRkcCWPricrBj5Xr45hCP1" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script src="{% static 'company/js/index.js' %}"></script>
 
-    <script>
-        // populate Chart (PIE): Bug Report  Type
-        function populateBugTypePie() {
-            var bugTypePie = document.getElementById("bugTypePie").getContext("2d");
-
-            // Create the pie chart
-            new Chart(bugTypePie, {
-            type: "pie",
-            data: {
-                labels: JSON.parse(
-                    '{{ bug_report_type_piechart_data.bug_report_type_labels | safe }}'
-                ),
-                datasets: [
-                {
-                    label: "Pie Chart",
-                    data: JSON.parse(
-                    '{{ bug_report_type_piechart_data.bug_report_type_data | safe }}'
-                    ),
-                    backgroundColor: [
-                    "rgb(255, 99, 132)",
-                    "rgb(54, 162, 235)",
-                    "rgb(255, 205, 86)",
-                    ],
-                },
-                ],
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-            },
-            });
-        }
-
-        function populateReportOnDomainsPie() {
-            var domainPie = document.getElementById("domainPie").getContext("2d");
-
-            // Create the pie chart
-            new Chart(domainPie, {
-            type: "pie",
-            data: {
-                labels: JSON.parse(
-                '{{ reports_on_domain_piechart_data.bug_report_on_domains_labels | safe }}'
-                ),
-                datasets: [
-                {
-                    label: "Pie Chart",
-                    data: JSON.parse(
-                    '{{ reports_on_domain_piechart_data.bug_report_on_domains_data | safe }}'
-                    ),
-                    backgroundColor: [
-                    "rgb(255, 99, 132)",
-                    "rgb(54, 162, 235)",
-                    "rgb(255, 205, 86)",
-                    ],
-                },
-                ],
+<script>
+  // populate Chart (PIE): Bug Report  Type
+  function populateBugTypePie() {
+    var bugTypePie = document.getElementById("bugTypePie").getContext("2d");
+
+    // Create the pie chart
+    new Chart(bugTypePie, {
+      type: "pie",
+      data: {
+        labels: JSON.parse(
+          '{{ bug_report_type_piechart_data.bug_report_type_labels | safe }}'
+        ),
+        datasets: [
+          {
+            label: "Pie Chart",
+            data: JSON.parse(
+              '{{ bug_report_type_piechart_data.bug_report_type_data | safe }}'
+            ),
+            backgroundColor: [
+              "rgb(255, 99, 132)",
+              "rgb(54, 162, 235)",
+              "rgb(255, 205, 86)",
+            ],
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+      },
+    });
+  }
+
+  function populateReportOnDomainsPie() {
+    var domainPie = document.getElementById("domainPie").getContext("2d");
+
+    // Create the pie chart
+    new Chart(domainPie, {
+      type: "pie",
+      data: {
+        labels: JSON.parse(
+          '{{ reports_on_domain_piechart_data.bug_report_on_domains_labels | safe }}'
+        ),
+        datasets: [
+          {
+            label: "Pie Chart",
+            data: JSON.parse(
+              '{{ reports_on_domain_piechart_data.bug_report_on_domains_data | safe }}'
+            ),
+            backgroundColor: [
+              "rgb(255, 99, 132)",
+              "rgb(54, 162, 235)",
+              "rgb(255, 205, 86)",
+            ],
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+      },
+    });
+  }
+
+  function populateMonthlyReportBarChart() {
+    const ctx = document.getElementById("myChart");
+
+    new Chart(ctx, {
+      type: "bar",
+      data: {
+        labels: JSON.parse(
+          '{{ get_current_year_monthly_reported_bar_data.bug_monthly_report_labels | safe }}'
+        ),
+        datasets: [
+          {
+            label: "Expense",
+            data: JSON.parse(
+              '{{ get_current_year_monthly_reported_bar_data.bug_monthly_report_data | safe }}'
+            ),
+            borderWidth: 1,
+            borderRadius: 30,
+            barThickness: 12,
+            backgroundColor: ["rgba(114, 92, 255, 1)"],
+            borderColor: ["rgba(114, 92, 255, 1)"],
+            hoverBackgroundColor: ["rgba(28, 30, 35, 1)"],
+            hoverBorderColor: ["rgba(28, 30, 35, 1)"],
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        scales: {
+          y: {
+            beginAtZero: true,
+            ticks: {
+              // Include a dollar sign in the ticks
+              callback: function (value, index, ticks) {
+                return value + " Bugs";
+              },
+              stepSize: JSON.parse(
+                '{{ get_current_year_monthly_reported_bar_data.max_count | safe }}'
+              ),
             },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
+          },
+          x: {
+            grid: {
+              display: false,
             },
-            });
-        }
-
-        function populateMonthlyReportBarChart() {
-            const ctx = document.getElementById("myChart");
-
-            new Chart(ctx, {
-            type: "bar",
-            data: {
-                labels: JSON.parse(
-                '{{ get_current_year_monthly_reported_bar_data.bug_monthly_report_labels | safe }}'
-                ),
-                datasets: [
-                {
-                    label: "Expense",
-                    data: JSON.parse(
-                    '{{ get_current_year_monthly_reported_bar_data.bug_monthly_report_data | safe }}'
-                    ),
-                    borderWidth: 1,
-                    borderRadius: 30,
-                    barThickness: 12,
-                    backgroundColor: ["rgba(114, 92, 255, 1)"],
-                    borderColor: ["rgba(114, 92, 255, 1)"],
-                    hoverBackgroundColor: ["rgba(28, 30, 35, 1)"],
-                    hoverBorderColor: ["rgba(28, 30, 35, 1)"],
-                },
-                ],
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+            labels: {
+              font: {
+                size: 12,
+                family: "'Plus Jakarta Sans', sans-serif",
+                lineHeight: 18,
+                weight: 600,
+              },
             },
-            options: {
-                responsive: true,
-                scales: {
-                y: {
-                    beginAtZero: true,
-                    ticks: {
-                    // Include a dollar sign in the ticks
-                    callback: function (value, index, ticks) {
-                        return value + " Bugs";
-                    },
-                    stepSize: JSON.parse(
-                        '{{ get_current_year_monthly_reported_bar_data.max_count | safe }}'
-                    ),
-                    },
-                },
-                x: {
-                    grid: {
-                    display: false,
-                    },
-                },
-                },
-                plugins: {
-                legend: {
-                    display: false,
-                    labels: {
-                    font: {
-                        size: 12,
-                        family: "'Plus Jakarta Sans', sans-serif",
-                        lineHeight: 18,
-                        weight: 600,
-                    },
-                    },
-                },
-                },
-            },
-            });
-        }
-
-        function populateSpentOnBugTypes() {
-            const ctx2 = document.getElementById("spentOnBugTypes");
-
-            new Chart(ctx2, {
-            type: "doughnut",
-            data: {
-                labels: JSON.parse('{{ spent_on_bugtypes.labels | safe }}'),
-                datasets: [
-                {
-                    data: JSON.parse('{{ spent_on_bugtypes.data | safe }}'),
-                    borderRadius: 5,
-                    cutout: 80,
-                    backgroundColor: [
-                    "rgb(235, 124, 166)",
-                    "rgb(255, 172, 200)",
-                    "rgb(204, 111, 248)",
-                    "rgb(124, 92, 252)",
-                    "rgb(92, 175, 252)",
-                    "rgb(161, 169, 254)",
-                    "rgb(161, 169, 254)",
-                    "rgb(161, 169, 254)",
-                    ],
-                    hoverOffset: 4,
-                    spacing: 8,
-                },
-                ],
-            },
-            options: {
-                plugins: {
-                legend: {
-                    display: false,
-                },
-                },
-            },
-            });
-        }
-
-        populateSpentOnBugTypes();
-        populateMonthlyReportBarChart();
-        populateReportOnDomainsPie();
-        populateBugTypePie();
-    </script>
-
-{% endblock %}
+          },
+        },
+      },
+    });
+  }
+
+  function populateSpentOnBugTypes() {
+    const ctx2 = document.getElementById("spentOnBugTypes");
+
+    new Chart(ctx2, {
+      type: "doughnut",
+      data: {
+        labels: JSON.parse('{{ spent_on_bugtypes.labels | safe }}'),
+        datasets: [
+          {
+            data: JSON.parse('{{ spent_on_bugtypes.data | safe }}'),
+            borderRadius: 5,
+            cutout: 80,
+            backgroundColor: [
+              "rgb(235, 124, 166)",
+              "rgb(255, 172, 200)",
+              "rgb(204, 111, 248)",
+              "rgb(124, 92, 252)",
+              "rgb(92, 175, 252)",
+              "rgb(161, 169, 254)",
+              "rgb(161, 169, 254)",
+              "rgb(161, 169, 254)",
+            ],
+            hoverOffset: 4,
+            spacing: 8,
+          },
+        ],
+      },
+      options: {
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+      },
+    });
+  }
+
+  populateSpentOnBugTypes();
+  populateMonthlyReportBarChart();
+  populateReportOnDomainsPie();
+  populateBugTypePie();
+</script>
+
+{% endblock %}
\ No newline at end of file