diff --git a/app/[username]/Charts.js b/app/[username]/Charts.js
index ac4dd9b..865b945 100644
--- a/app/[username]/Charts.js
+++ b/app/[username]/Charts.js
@@ -18,7 +18,7 @@ const borderColor = [
 
 const Charts = ({ commitsPerRepo, starsPerRepo, reposPerLanguages, starsPerLanguages }) => {
     return (
-        <GridContainer name="Charts" className={'grid-cols-2 gap-0 gap-y-6 px-2 md:grid-cols-4 md:gap-8 md:px-6'}>
+        <GridContainer name="Charts" className={'flex flex-row flex-wrap justify-evenly gap-0 gap-y-6 px-2 md:gap-8 md:px-6'}>
             <div className="">
                 <Doughnut
                     title="Commits per Repo"
diff --git a/app/[username]/FollowUp.js b/app/[username]/FollowUp.js
index 606cfe2..8ab5ba2 100644
--- a/app/[username]/FollowUp.js
+++ b/app/[username]/FollowUp.js
@@ -26,7 +26,7 @@ const FollowUp = ({ follwoup }) => {
     const { issues_by_user, pr_by_user, issues_on_user, pr_on_user, login } = follwoup;
 
     return (
-        <GridContainer name="Follow Up" className={'grid-cols-2 gap-0 gap-y-6 px-2 md:grid-cols-4 md:gap-8 md:px-6'}>
+        <GridContainer name="Follow Up" className={'flex flex-row flex-wrap justify-evenly gap-0 gap-y-6 px-2 md:gap-8 md:px-6'}>
             <div>
                 <Doughnut
                     options={{ plugins: { title: { text: `Issues by ${login}` } } }}