diff --git a/dist/index.bd513a2f.js b/dist/index.bd513a2f.js
index 962726d..c20e7c8 100644
--- a/dist/index.bd513a2f.js
+++ b/dist/index.bd513a2f.js
@@ -709,6 +709,19 @@ const $850e48264ea38c74$var$progress = [
     "text-lime-400",
     "text-lime-500"
 ];
+const $850e48264ea38c74$var$progress_bg = [
+    "bg-red-500",
+    "bg-red-400",
+    "bg-red-400",
+    "bg-red-300",
+    "bg-red-300",
+    "bg-yellow-400",
+    "bg-yellow-400",
+    "bg-amber-300",
+    "bg-amber-300",
+    "bg-lime-400",
+    "bg-lime-500", 
+];
 class $850e48264ea38c74$export$fca4f8121099df57 {
     constructor(input){
         this.id = 'uuid';
@@ -985,7 +998,7 @@ function $850e48264ea38c74$export$b93cec6dd11b1714(week) {
         videos.push($a51c7802bfe1890e$export$c0bb0b647f701bb5`
     <div class="video px-0">
       <p class="video-text ${$6197f1f1b7c083f0$export$56cc687933817664(inProgress)}">${video.m.toFixed(0).padStart(2, "0")}:${video.s.toFixed(0).padStart(2, "0")}</p>
-      <button class="video-btn ${$6197f1f1b7c083f0$export$56cc687933817664(btnClass)}" id="${id}-video-${i}">${video.seen ? '－' : '+'}</button>
+      <button class="video-btn ${$6197f1f1b7c083f0$export$56cc687933817664(btnClass)}" id="${id}-video-${i}"></button>
     </div>
   `);
     });
@@ -1011,25 +1024,16 @@ function $850e48264ea38c74$export$b93cec6dd11b1714(week) {
         if (data.total == 0) return;
         const btnUpValid = data.total > data.done;
         const btnDownValid = data.done > 0;
-        const commonClasses = {
-        };
-        const btnUp = {
-        };
-        const btnDown = {
-        };
-        if (btnUpValid && btnDownValid) commonClasses['add-margin'] = true;
-        Object.assign(btnUp, commonClasses);
-        Object.assign(btnDown, commonClasses);
         const inProgress = {
             'in-progress': btnUpValid,
             'done': !btnUpValid && btnDownValid
         };
         solvables.push($a51c7802bfe1890e$export$c0bb0b647f701bb5`
     <div class="act-time w-1/5">
-      <h2 class="act-text ${$6197f1f1b7c083f0$export$56cc687933817664(inProgress)}">${data.title} : ${data.done}/${data.total}</h2>
-      <div class="flex justify-around mt-0.5">
-        <button ?hidden=${!btnUpValid} class="solvable-btn btn-up ${$6197f1f1b7c083f0$export$56cc687933817664(btnUp)}" id="${id}-${data.title.toLowerCase()}-plus">+</button>
-        <button ?hidden=${!btnDownValid} class="solvable-btn btn-down ${$6197f1f1b7c083f0$export$56cc687933817664(btnDown)}" id="${id}-${data.title.toLowerCase()}-minus">－</button>
+      <h2 class="act-text ${$6197f1f1b7c083f0$export$56cc687933817664(inProgress)}"><span class="act-time-label">${data.title} : </span><br><span class="act-time-data">${data.done}/${data.total}</span></h2>
+      <div class="act-btn-parent">
+        <button ?hidden=${!btnUpValid} class="solvable-btn btn-up" id="${id}-${data.title.toLowerCase()}-plus"></button>
+        <button ?hidden=${!btnDownValid} class="solvable-btn btn-down" id="${id}-${data.title.toLowerCase()}-minus"></button>
       </div>
     </div>
   `);
@@ -1038,8 +1042,8 @@ function $850e48264ea38c74$export$b93cec6dd11b1714(week) {
     const max_in_row = 6;
     if (videos.length > max_in_row) // divide into two
     videos.splice(Math.ceil(videos.length / 2), 0, $a51c7802bfe1890e$export$c0bb0b647f701bb5`<div class="w-full"></div>`);
-    let progressColor = {
-        [$850e48264ea38c74$var$progress[Math.floor(_percentage / 10)]]: true
+    let progressColorBg = {
+        [$850e48264ea38c74$var$progress_bg[Math.floor(_percentage / 10)]]: true
     };
     const animatedBorderClassMap = {
         'gradient-border': Math.floor(_percentage / 10) == 10
@@ -1067,7 +1071,7 @@ function $850e48264ea38c74$export$b93cec6dd11b1714(week) {
               <div class="dropdown-menu absolute w-60 shadow-lg bg-white divide-x divide-gray-100 right-10 grid grid-cols-3">
                 <a class="text-gray-900 bg-white" id="${id}-lock"> ${week.locked ? 'Unlock' : 'Lock'} </a>
                 <a class="text-gray-900 bg-white" id="${id}-hide"> ${week.hidden ? 'Unhide' : 'Hide'} </a>
-                <a class="text-white bg-red-800" id="${id}-delete">Delete</a>
+                <a class="text-white bg-red-600" id="${id}-delete">Delete</a>
               </div>
             </div>
           </div>
@@ -1075,7 +1079,7 @@ function $850e48264ea38c74$export$b93cec6dd11b1714(week) {
       </div>
 
       <!-- Summary -->
-      <div ?hidden=${week.hidden} class="pt-1 px-5 mx-auto md:items-center md:flex-row justify-between">
+      <div ?hidden=${week.hidden} class="pt-1 px-5 mx-auto md:items-center md:flex-row justify-between ${$6197f1f1b7c083f0$export$56cc687933817664(progressColorBg)}">
         <div class="pb-1 px-10 flex justify-between items-center border-b-2 border-gray-600">
           <p class="dispay-container">
             <span class="dispay-label justify-start">Projected:</span>
@@ -1089,7 +1093,7 @@ function $850e48264ea38c74$export$b93cec6dd11b1714(week) {
 
           <p class="dispay-container justify-end">
             <span class="dispay-label">Done:</span>
-            <span class="dispay-data ${$6197f1f1b7c083f0$export$56cc687933817664(progressColor)}">${_percentage.toFixed(2)}%</span>
+            <span class="dispay-data">${_percentage.toFixed(2)}%</span>
           </p>
         </div>
       </div>
@@ -1109,7 +1113,7 @@ function $850e48264ea38c74$export$b93cec6dd11b1714(week) {
       <!-- Solvable -->
       <div ?hidden=${week.hidden} class="pt-3 pb-3 bt-5 px-5 mx-auto md:items-center md:flex-row justify-between">
         <div class="w-full">
-          <h2 class="pb-1 text-xl font-bold text-black lg:text-x lg:mr-8">
+          <h2 class="text-xl font-bold text-black lg:text-x lg:mr-8">
             Solvable
           </h2>
 
diff --git a/dist/index.cc8dc349.css b/dist/index.cc8dc349.css
index 2814a00..7170b7b 100644
--- a/dist/index.cc8dc349.css
+++ b/dist/index.cc8dc349.css
@@ -739,18 +739,10 @@ video {
   margin-bottom: 1.25rem;
 }
 
-.mt-0 {
-  margin-top: 0px;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
 
-.mt-0\.5 {
-  margin-top: 0.125rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -968,14 +960,29 @@ video {
   background-color: rgba(39, 39, 42, var(--tw-bg-opacity));
 }
 
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(252, 165, 165, var(--tw-bg-opacity));
+}
+
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
+}
+
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
 }
 
-.bg-red-800 {
+.bg-red-600 {
   --tw-bg-opacity: 1;
-  background-color: rgba(153, 27, 27, var(--tw-bg-opacity));
+  background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
+}
+
+.bg-lime-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(163, 230, 53, var(--tw-bg-opacity));
 }
 
 .bg-lime-500 {
@@ -988,11 +995,21 @@ video {
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
+.bg-amber-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(252, 211, 77, var(--tw-bg-opacity));
+}
+
 .bg-amber-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(245, 158, 11, var(--tw-bg-opacity));
 }
 
+.bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(250, 204, 21, var(--tw-bg-opacity));
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1319,6 +1336,7 @@ body {
 
 .week-overall {
   border-width: 0px !important;
+  background: rgba(252, 252, 252, 1);
 }
 
 .move-up {
@@ -1378,6 +1396,7 @@ body {
   margin-bottom: 0.25rem;
   width: 15%;
   display: flex;
+  justify-content: space-between;
   font-size: 1.5rem;
   line-height: 2rem;
   font-weight: 700;
@@ -1386,76 +1405,39 @@ body {
   box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
-.act-time {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  width: 41.666667%;
-  max-width: 28rem;
-  display: block;
-  padding: 0.25rem;
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  font-size: 1.5rem;
-  line-height: 2rem;
-  font-weight: 700;
-}
-
 .video-text {
   width: 66.666667%;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  text-align: center;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-.act-text {
-  width: 100%;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
   text-align: center;
   font-size: 1.125rem;
   line-height: 1.75rem;
+  font-weight: 900;
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-/*
- TODO
- SEPERATE THEM ALL
-
- VIDEO RED ON WHITW
- BLACK ON GREEN
-*/
-
-.video-text.in-progress, .act-text.in-progress  {
-  --tw-bg-opacity: 1;
-  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+.video-text.in-progress {
   --tw-text-opacity: 1;
-  color: rgba(244, 244, 245, var(--tw-text-opacity));
+  color: rgba(220, 38, 38, var(--tw-text-opacity));
 }
 
-.video-text.done, .act-text.done {
-  --tw-bg-opacity: 1;
-  background-color: rgba(132, 204, 22, var(--tw-bg-opacity));
+.video-text.done {
   --tw-text-opacity: 1;
-  color: rgba(24, 24, 27, var(--tw-text-opacity));
+  color: rgba(101, 163, 13, var(--tw-text-opacity));
 }
 
 .video-btn {
-  margin-left: 0.125rem;
   width: 33.333333%;
-  display: flex;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
+  display: block;
   text-align: center;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  opacity: 0.7;
 }
 
 .video-btn:hover {
-  opacity: 0.6;
+  opacity: 0.4;
 }
 
 .video-btn:focus {
@@ -1466,17 +1448,13 @@ body {
 .video-btn.btn-up {
   --tw-bg-opacity: 1;
   background-color: rgba(132, 204, 22, var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(24, 24, 27, var(--tw-text-opacity));
-  font-weight: 500;
+  font-weight: 400;
 }
 
 .video-btn.btn-down {
   --tw-bg-opacity: 1;
-  background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(220, 38, 38, var(--tw-text-opacity));
-  font-weight: 900;
+  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+  font-weight: 400;
 }
 
 .better-button {
@@ -1486,22 +1464,73 @@ body {
   font-weight: 900;
 }
 
+.act-time {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  width: 33.333333%;
+  max-width: 28rem;
+  display: flex;
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.act-text {
+  width: 83.333333%;
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
+  text-align: center;
+}
+
+.act-text.in-progress {
+  --tw-text-opacity: 1;
+  color: rgba(220, 38, 38, var(--tw-text-opacity));
+}
+
+.act-text.done {
+  --tw-text-opacity: 1;
+  color: rgba(101, 163, 13, var(--tw-text-opacity));
+}
+
+.act-time-label {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgba(0, 0, 0, var(--tw-text-opacity));
+  letter-spacing: -0.025em;
+}
+
+.act-time-data {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+}
+
+.act-btn-parent {
+  width: 16.666667%;
+  display: flex;
+  flex-direction: column;
+}
+
 .solvable-btn {
   border-width: 1px;
   border: 1px solid transparent;
   box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
   font-weight: 900;
-  width: auto;
+  width: 100%;
   flex-grow: 1;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  font-weight: 900;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 200;
+  opacity: 0.7;
 }
 
 .solvable-btn:hover {
-  opacity: 0.6;
+  opacity: 0.4;
 }
 
 .solvable-btn:focus {
@@ -1522,17 +1551,9 @@ body {
 
 .solvable-btn.btn-down {
   --tw-bg-opacity: 1;
-  background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
+  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgba(220, 38, 38, var(--tw-text-opacity));
-}
-
-.solvable-btn.btn-up.add-margin {
-  margin-right: 0.125rem;
-}
-
-.solvable-btn.btn-down.add-margin-left {
-  margin-left: 0.125rem;
+  color: rgba(244, 244, 245, var(--tw-text-opacity));
 }
 
 /**/
@@ -1690,7 +1711,7 @@ body {
 /**/
 
 .dropdown-menu {
-  top: 0;
+  top: 4px;
   border: 1px solid #aaaaaa;
   box-shadow: 10px 12px 0.5rem rgb(0 0 0 / 50%);
   justify-content: flex-end;
@@ -1698,16 +1719,16 @@ body {
 
 .dropdown-menu a {
   display: block;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
   text-align: center;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .dropdown-menu a:hover {
-  opacity: 0.5;
+  opacity: 0.4;
 }
 
 /**/
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 49a30c6..9304db7 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -40,7 +40,7 @@ checksum = "61604a8f862e1d5c3229fdd78f8b02c68dcf73a4c4b05fd636d12240aaa242c1"
 
 [[package]]
 name = "app"
-version = "1.6.1"
+version = "2.0.0"
 dependencies = [
  "serde",
  "serde_json",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 2b24338..33e0313 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "1.6.1"
+version = "2.0.0"
 description = "Progress tracking app"
 authors = [ "antimatter96" ]
 license = ""
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 0dfde9c..a0199cc 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "calc",
-    "version": "1.6.1"
+    "version": "2.0.0"
   },
   "build": {
     "distDir": "../dist",
diff --git a/src/src/js/week.ts b/src/src/js/week.ts
index e69b77b..3f8d298 100644
--- a/src/src/js/week.ts
+++ b/src/src/js/week.ts
@@ -1,7 +1,6 @@
-import { html, render } from 'lit-html';
+import { html } from 'lit-html';
 import { classMap } from 'lit-html/directives/class-map';
 
-
 import { v4 as uuid } from "uuid";
 
 const progress = [
@@ -13,6 +12,16 @@ const progress = [
   "text-lime-500"
 ]
 
+const progress_bg = [
+  "bg-red-500",
+  "bg-red-400", "bg-red-400",
+  "bg-red-300", "bg-red-300",
+  "bg-yellow-400", "bg-yellow-400",
+  "bg-amber-300", "bg-amber-300",
+  "bg-lime-400",
+  "bg-lime-500",
+]
+
 export class Week {
   id = 'uuid'
   name = "Sample Week 1";
@@ -367,7 +376,7 @@ export function templateFunc(week: Week) {
     videos.push(html`
     <div class="video px-0">
       <p class="video-text ${classMap(inProgress)}">${video.m.toFixed(0).padStart(2, "0")}:${video.s.toFixed(0).padStart(2, "0")}</p>
-      <button class="video-btn ${classMap(btnClass)}" id="${id}-video-${i}">${video.seen ? '－' : '+'}</button>
+      <button class="video-btn ${classMap(btnClass)}" id="${id}-video-${i}"></button>
     </div>
   `);
   });
@@ -403,25 +412,14 @@ export function templateFunc(week: Week) {
     const btnUpValid = data.total > data.done;
     const btnDownValid = data.done > 0;
 
-    const commonClasses = {};
-    const btnUp = {}
-    const btnDown = {};
-
-    if (btnUpValid && btnDownValid) {
-      commonClasses['add-margin'] = true;
-    }
-
-    Object.assign(btnUp, commonClasses);
-    Object.assign(btnDown, commonClasses);
-
     const inProgress = { 'in-progress': btnUpValid, 'done': (!btnUpValid && btnDownValid) }
 
     solvables.push(html`
     <div class="act-time w-1/5">
-      <h2 class="act-text ${classMap(inProgress)}">${data.title} : ${data.done}/${data.total}</h2>
-      <div class="flex justify-around mt-0.5">
-        <button ?hidden=${!btnUpValid} class="solvable-btn btn-up ${classMap(btnUp)}" id="${id}-${data.title.toLowerCase()}-plus">+</button>
-        <button ?hidden=${!btnDownValid} class="solvable-btn btn-down ${classMap(btnDown)}" id="${id}-${data.title.toLowerCase()}-minus">－</button>
+      <h2 class="act-text ${classMap(inProgress)}"><span class="act-time-label">${data.title} : </span><br><span class="act-time-data">${data.done}/${data.total}</span></h2>
+      <div class="act-btn-parent">
+        <button ?hidden=${!btnUpValid} class="solvable-btn btn-up" id="${id}-${data.title.toLowerCase()}-plus"></button>
+        <button ?hidden=${!btnDownValid} class="solvable-btn btn-down" id="${id}-${data.title.toLowerCase()}-minus"></button>
       </div>
     </div>
   `);
@@ -431,10 +429,10 @@ export function templateFunc(week: Week) {
   const max_in_row = 6;
   if (videos.length > max_in_row) {
     // divide into two
-    videos.splice(Math.ceil(videos.length/2), 0, html`<div class="w-full"></div>`)
+    videos.splice(Math.ceil(videos.length / 2), 0, html`<div class="w-full"></div>`)
   }
 
-  let progressColor = { [progress[(Math.floor(_percentage / 10))]]: true };
+  let progressColorBg = { [progress_bg[Math.floor(_percentage / 10)]]: true };
 
   const animatedBorderClassMap = {
     'gradient-border': (Math.floor(_percentage / 10)) == 10
@@ -463,7 +461,7 @@ export function templateFunc(week: Week) {
               <div class="dropdown-menu absolute w-60 shadow-lg bg-white divide-x divide-gray-100 right-10 grid grid-cols-3">
                 <a class="text-gray-900 bg-white" id="${id}-lock"> ${week.locked ? 'Unlock' : 'Lock'} </a>
                 <a class="text-gray-900 bg-white" id="${id}-hide"> ${week.hidden ? 'Unhide' : 'Hide'} </a>
-                <a class="text-white bg-red-800" id="${id}-delete">Delete</a>
+                <a class="text-white bg-red-600" id="${id}-delete">Delete</a>
               </div>
             </div>
           </div>
@@ -471,7 +469,7 @@ export function templateFunc(week: Week) {
       </div>
 
       <!-- Summary -->
-      <div ?hidden=${week.hidden} class="pt-1 px-5 mx-auto md:items-center md:flex-row justify-between">
+      <div ?hidden=${week.hidden} class="pt-1 px-5 mx-auto md:items-center md:flex-row justify-between ${classMap(progressColorBg)}">
         <div class="pb-1 px-10 flex justify-between items-center border-b-2 border-gray-600">
           <p class="dispay-container">
             <span class="dispay-label justify-start">Projected:</span>
@@ -485,7 +483,7 @@ export function templateFunc(week: Week) {
 
           <p class="dispay-container justify-end">
             <span class="dispay-label">Done:</span>
-            <span class="dispay-data ${classMap(progressColor)}">${_percentage.toFixed(2)}%</span>
+            <span class="dispay-data">${_percentage.toFixed(2)}%</span>
           </p>
         </div>
       </div>
@@ -505,7 +503,7 @@ export function templateFunc(week: Week) {
       <!-- Solvable -->
       <div ?hidden=${week.hidden} class="pt-3 pb-3 bt-5 px-5 mx-auto md:items-center md:flex-row justify-between">
         <div class="w-full">
-          <h2 class="pb-1 text-xl font-bold text-black lg:text-x lg:mr-8">
+          <h2 class="text-xl font-bold text-black lg:text-x lg:mr-8">
             Solvable
           </h2>
 
diff --git a/src/src/style.css b/src/src/style.css
index f2f8b5a..7409c56 100644
--- a/src/src/style.css
+++ b/src/src/style.css
@@ -16,7 +16,7 @@ body {
 }
 
 .good-shadow {
-  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); 
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
 .better-shadow {
@@ -36,11 +36,12 @@ body {
 }
 
 #nav.displaced {
-	border-bottom: 2px transparent solid;
+  border-bottom: 2px transparent solid;
 }
 
 .week-overall {
   border-width: 0px !important;
+  background: rgba(252, 252, 252, 1);
 }
 
 .move-up {
@@ -63,69 +64,46 @@ body {
   @apply mx-0.5 my-1;
   width: 15%;
 
-  @apply flex;
+  @apply flex justify-between;
 
   @apply text-2xl font-bold text-white;
   @apply good-shadow;
 }
 
-.act-time {
-  @apply w-5/12 mx-2 my-2 max-w-md;
-  @apply block;
-
-  @apply p-1;
-  @apply text-2xl font-bold bg-white;
-}
-
 .video-text {
   @apply w-2/3;
-  @apply py-1;
+  @apply py-1.5;
 
   @apply text-center text-lg;
+  @apply font-black;
+  @apply bg-white;
 }
 
-.act-text {
-  @apply w-full;
-  @apply py-3;
-
-  @apply text-center text-lg;
+.video-text.in-progress {
+  @apply text-red-600;
 }
 
-/*
- TODO
- SEPERATE THEM ALL
-
- VIDEO RED ON WHITW
- BLACK ON GREEN
-*/
-
-.video-text.in-progress, .act-text.in-progress  {
-  @apply bg-red-500;
-  @apply text-gray-100;
-}
-
-.video-text.done, .act-text.done {
-  @apply bg-lime-500;
-  @apply text-gray-900;
+.video-text.done {
+  @apply text-lime-600;
 }
 
 .video-btn {
-  @apply w-1/3 ml-0.5;
-  @apply flex justify-center content-center items-center;
+  @apply w-1/3;
+  @apply block;
 
-  @apply text-lg text-center;
+  @apply text-2xl text-center opacity-70;
 
-  @apply focus:outline-none hover:opacity-60;
+  @apply focus:outline-none hover:opacity-40;
 }
 
 .video-btn.btn-up {
-  @apply bg-lime-500 text-gray-900;
-  @apply font-medium;
+  @apply bg-lime-500;
+  @apply font-normal;
 }
 
 .video-btn.btn-down {
-  @apply bg-gray-100 text-red-600;
-  @apply font-black;
+  @apply bg-red-500;
+  @apply font-normal;
 }
 
 .better-button {
@@ -134,16 +112,54 @@ body {
   @apply font-black;
 }
 
+
+.act-time {
+  @apply w-4/12 mx-2 my-2 max-w-md;
+  @apply flex;
+
+  @apply bg-white;
+  @apply good-shadow;
+}
+
+.act-text {
+  @apply w-5/6;
+  @apply py-3.5;
+
+  @apply text-center;
+}
+
+.act-text.in-progress {
+  @apply text-red-600;
+}
+
+.act-text.done {
+  @apply text-lime-600;
+}
+
+.act-time-label {
+  @apply text-black text-xl font-medium;
+  @apply tracking-tight;
+}
+
+.act-time-data {
+  @apply text-2xl font-extrabold;
+  @apply tracking-wider;
+}
+
+.act-btn-parent {
+  @apply w-1/6;
+  @apply flex flex-col;
+}
+
 .solvable-btn {
   @apply better-button;
 
-  @apply w-auto;
+  @apply w-full;
   @apply flex-grow;
 
-  @apply py-1;
-  @apply text-xl font-black;
+  @apply text-sm font-extralight opacity-70;
 
-  @apply focus:outline-none hover:opacity-60;
+  @apply focus:outline-none hover:opacity-40;
 }
 
 .solvable-btn.invalid {
@@ -151,19 +167,11 @@ body {
 }
 
 .solvable-btn.btn-up {
-  @apply bg-lime-500 text-gray-900 ;
+  @apply bg-lime-500 text-gray-900;
 }
 
 .solvable-btn.btn-down {
-  @apply bg-gray-100 text-red-600;
-}
-
-.solvable-btn.btn-up.add-margin {
-  @apply mr-0.5;
-}
-
-.solvable-btn.btn-down.add-margin-left {
-  @apply ml-0.5;
+  @apply text-gray-100 bg-red-500;
 }
 
 
@@ -237,14 +245,14 @@ body {
 /**/
 
 .dropdown-menu {
-  top: 0;
+  top: 4px;
   border: 1px solid #aaaaaa;
   box-shadow: 10px 12px 0.5rem rgb(0 0 0 / 50%);
   @apply justify-end;
 }
 
 .dropdown-menu a {
-  @apply block py-2 text-lg hover:opacity-50 text-center font-bold;
+  @apply block py-1.5 text-lg hover:opacity-40 text-center font-semibold;
 }
 
 /**/