diff --git a/src/components/SubscriptionInfo.tsx b/src/components/SubscriptionInfo.tsx
index 8eb9405..06b40a9 100644
--- a/src/components/SubscriptionInfo.tsx
+++ b/src/components/SubscriptionInfo.tsx
@@ -34,9 +34,12 @@ export default (props: { subscriptionInfo: SubscriptionInfo }) => {
 
   return (
     <>
+      <progress class="progress" value={info.percentage} max="100" />
+
       <div class="text-sm text-slate-500">
         {`${info.used}`} / {`${info.total}`} ( {info.percentage}% )
       </div>
+
       <div class="text-sm text-slate-500">Expire: {info.expireStr()} </div>
     </>
   )
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index 1896ec9..a3e8b83 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -124,7 +124,7 @@ export default () => {
             {(proxyProvider) => {
               const title = (
                 <div class="flex items-center justify-between">
-                  <div class="flex flex-col">
+                  <div class="flex flex-col gap-1">
                     <span>{proxyProvider.name}</span>
                     <SubscriptionInfo
                       subscriptionInfo={proxyProvider.subscriptionInfo}
@@ -135,7 +135,7 @@ export default () => {
                     </div>
                   </div>
 
-                  <div>
+                  <div class="flex flex-nowrap">
                     <button
                       class="btn btn-circle btn-sm mr-2"
                       onClick={(e) =>