diff --git a/src/App.jsx b/src/App.jsx
index cb4f25e..d7fb9f3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,7 +13,7 @@ const backgroundStyle = {
   maxHeight: "100vh",
 }
 
-const url = import.meta.env.VITE_REACT_APP_BACKEND_URL_DEV;
+const url = import.meta.env.VITE_REACT_APP_BACKEND_URL;
 
 function App() {
   const [activeTab, setActiveTab] = useState("Compression");
@@ -91,6 +91,7 @@ function App() {
                               text={obj.text}
                               compressed={obj.compressed}
                               enhanced={obj.enhanced}
+                              ratio={obj.remained.toFixed(2)}
                             />
                           ))
                         ) : (
@@ -121,6 +122,8 @@ function App() {
                               date={obj.date}
                               text={obj.text}
                               decompressed={obj.decompressed}
+                              enhanced={obj.enhanced}
+                              ratio={obj.remained.toFixed(2)}
                             />
                           ))
                         ) : (
diff --git a/src/components/Cards/CompressionCard.jsx b/src/components/Cards/CompressionCard.jsx
index 5baa38f..5344379 100644
--- a/src/components/Cards/CompressionCard.jsx
+++ b/src/components/Cards/CompressionCard.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const CompressionCard = ({ date, time, text, compressed, enhanced }) => {
+const CompressionCard = ({ date, time, text, compressed, enhanced, ratio }) => {
     return (
         <div className='w-full rounded-xl bg-redCard flex flex-col p-3.5 pl-5 text-white mb-4'>
             <div className='py-1 flex flex-row'>
@@ -19,6 +19,9 @@ const CompressionCard = ({ date, time, text, compressed, enhanced }) => {
                 <p className='font-bold text-base'>Compressed Text {enhanced}</p>
                 <p className='font-medium text-sm overflow-auto w-full'>{compressed}</p>
             </div>
+            <div className='py-1 w-full'>
+                <p className='text-base font-bold'>Compression Rate &nbsp;{ratio} %</p>
+            </div>
         </div>
     )
 }
diff --git a/src/components/Cards/DecompressionCard.jsx b/src/components/Cards/DecompressionCard.jsx
index 5443105..84e15ea 100644
--- a/src/components/Cards/DecompressionCard.jsx
+++ b/src/components/Cards/DecompressionCard.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const DecompressionCard = ({ date, time, text, decompressed, enhanced }) => {
+const DecompressionCard = ({ date, time, text, decompressed, enhanced, ratio }) => {
     return (
         <div className='w-full rounded-xl bg-redCard flex flex-col p-3.5 pl-5 text-white mb-4'>
             <div className='py-1 flex flex-row'>
@@ -19,6 +19,9 @@ const DecompressionCard = ({ date, time, text, decompressed, enhanced }) => {
                 <p className='font-bold text-base'>Plain Text {enhanced}</p>
                 <p className='font-medium text-sm overflow-auto w-full'>{decompressed}</p>
             </div>
+            <div className='py-1 w-full'>
+                <p className='text-base font-bold'>Decompression Rate &nbsp;{ratio} %</p>
+            </div>
         </div>
     )
 }
diff --git a/src/components/Forms/CompressionForms.jsx b/src/components/Forms/CompressionForms.jsx
index 6f0ec40..fc44c4c 100644
--- a/src/components/Forms/CompressionForms.jsx
+++ b/src/components/Forms/CompressionForms.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-const url = import.meta.env.VITE_REACT_APP_BACKEND_URL_DEV;
+const url = import.meta.env.VITE_REACT_APP_BACKEND_URL;
 
 // Compression Forms Component
 const CompressionForm = () => {
@@ -58,7 +58,7 @@ const CompressionForm = () => {
                             <label className="font-medium">
                                 Algorithm Enhance
                             </label>
-                            <div className="flex flex-col mt-1.5 grid grid-cols-2 space-x-2 rounded-lg bg-secondaryYellow p-2">
+                            <div className="flex flex-col mt-1.5 grid grid-cols-2 space-x-2 rounded-lg bg-secondaryYellow p-1.5">
                                 <div>
                                     <input type="radio" id="basiccomp" name="basiccomp" value="Basic LZW" checked={enhancecomp === false} onChange={() => setEnhancecomp(false)} className="peer hidden"></input>
                                     <label htmlFor="basiccomp" className="text-sm block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-primaryBlue font-bold peer-checked:text-white h-full flex justify-center items-center">Basic LZW</label>
@@ -77,10 +77,17 @@ const CompressionForm = () => {
                         </button>
                     </div>
                     <div className="h-2/6 flex flex-col">
-                        <h3 className='text-lg py-1.5 font-semibold text-primaryBlue'>Result</h3>
+                        <div className="flex flex-row">
+                            <div className="w-1/2">
+                                <h3 className='text-lg py-1.5 font-semibold text-primaryBlue'>Result</h3>
+                            </div>
+                            <div className="w-1/2 flex items-center">
+                                <span className='text-lg py-auto font-semibold text-primaryBlue'>Compression Rate : </span>&nbsp;{result[1] ? result[1].toFixed(2) : '-'} %
+                            </div>
+                        </div>
                         <div className="overflow-y-auto">
-                            {result ? 
-                                (<div className="bg-secondaryYellow outline-none border focus:border-indigo-600 shadow-sm rounded-lg mt-1 px-4 py-2">{result}</div>) 
+                            {result[0] ? 
+                                (<div className="bg-primaryGray outline-none border focus:border-indigo-600 shadow-sm rounded-lg mt-1 px-4 py-2">{result[0]}</div>) 
                                 : (<p>You haven't compress any plain text.</p>)}
                         </div>
                     </div>
diff --git a/src/components/Forms/DecompressionForm.jsx b/src/components/Forms/DecompressionForm.jsx
index c25f18a..814d04f 100644
--- a/src/components/Forms/DecompressionForm.jsx
+++ b/src/components/Forms/DecompressionForm.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-const url = import.meta.env.VITE_REACT_APP_BACKEND_URL_DEV;
+const url = import.meta.env.VITE_REACT_APP_BACKEND_URL;
 
 // Decompression Forms Component
 const DecompressionForm = () => {
@@ -58,7 +58,7 @@ const DecompressionForm = () => {
                             <label className="font-medium">
                                 Algorithm Enhance
                             </label>
-                            <div className="flex flex-col mt-1.5 grid grid-cols-2 space-x-2 rounded-lg bg-secondaryYellow p-2">
+                            <div className="flex flex-col mt-1.5 grid grid-cols-2 space-x-2 rounded-lg bg-secondaryYellow p-1.5">
                                 <div>
                                     <input type="radio" id="basicdecomp" name="basicdecomp" value="Basic LZW" checked={enhancedecomp === false} onChange={() => setEnhancedecomp(false)} className="peer hidden"></input>
                                     <label htmlFor="basicdecomp" className="text-sm block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-primaryBlue font-bold peer-checked:text-white h-full flex justify-center items-center">Basic LZW</label>
@@ -77,10 +77,17 @@ const DecompressionForm = () => {
                         </button>
                     </div>
                     <div className="h-2/6 flex flex-col">
-                        <h3 className='text-lg py-1.5 font-semibold text-primaryBlue'>Result</h3>
+                        <div className="flex flex-row">
+                            <div className="w-1/2">
+                                <h3 className='text-lg py-1.5 font-semibold text-primaryBlue'>Result</h3>
+                            </div>
+                            <div className="w-1/2 flex items-center">
+                                <span className='text-lg py-auto font-semibold text-primaryBlue'>Decompression Rate : </span>&nbsp;{result[1] ? result[1].toFixed(2) : '-'} %
+                            </div>
+                        </div>
                         <div className="overflow-y-auto">
-                            {result ? 
-                                (<div className="bg-secondaryYellow outline-none border focus:border-indigo-600 shadow-sm rounded-lg mt-1 px-4 py-2">{result}</div>) 
+                            {result[0] ? 
+                                (<div className="bg-primaryGray outline-none border focus:border-indigo-600 shadow-sm rounded-lg mt-1 px-4 py-2">{result[0]}</div>) 
                                 : (<p>You haven't decompress any plain text.</p>)}
                         </div>
                     </div>