diff --git a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
index 040683b9..252d85a1 100644
--- a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
+++ b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
@@ -11,7 +11,7 @@ export const Activity = ({
   activities: GitCommitWithBranch[];
 }) => {
   return (
-    <div className="col-span-2 mr-1">
+    <div className="col-span-5 md:col-span-2 mr-1">
       <div className="flex items-center justify-between">
         <Heading className="text-lg leading-6 font-medium">Activity</Heading>
         <Button variant="tertiary" size="sm">
diff --git a/packages/frontend/src/pages/org-slug/projects/Id.tsx b/packages/frontend/src/pages/org-slug/projects/Id.tsx
index 8b164852..668b3f8e 100644
--- a/packages/frontend/src/pages/org-slug/projects/Id.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/Id.tsx
@@ -7,6 +7,7 @@ import {
   useParams,
 } from 'react-router-dom';
 import { Project as ProjectType } from 'gql-client';
+import { useMediaQuery } from 'usehooks-ts';
 
 import { useGQLClient } from '../../../context/GQLClientContext';
 import { useOctokit } from '../../../context/OctokitContext';
@@ -23,6 +24,9 @@ const Id = () => {
   const client = useGQLClient();
   const location = useLocation();
 
+  const isDesktopView = useMediaQuery('(min-width: 768px)'); // md:
+  const buttonSize = isDesktopView ? {} : { size: 'sm' as const };
+
   const [project, setProject] = useState<ProjectType | null>(null);
   const [repoUrl, setRepoUrl] = useState('');
 
@@ -65,25 +69,32 @@ const Id = () => {
       {project ? (
         <>
           <div className="px-6 py-4 flex justify-between items-center gap-4">
-            <div className="flex items-center justify-center gap-4">
+            <div className="flex items-center justify-center gap-4 overflow-hidden">
               <Button
                 variant="tertiary"
-                className="rounded-full h-11 w-11 p-0"
+                iconOnly
+                className="rounded-full h-11 w-11 p-0 shrink-0"
                 aria-label="Go back"
                 leftIcon={<ChevronLeft />}
                 onClick={() => navigate(-1)}
               />
-              <Heading className="text-2xl font-medium">
+              <Heading className="text-2xl font-medium truncate">
                 {project?.name}
               </Heading>
             </div>
             <div className="flex items-center justify-center gap-3">
               <Link to={repoUrl} target="_blank">
-                <Button className="h-11 transition-colors" variant="tertiary">
+                <Button
+                  {...buttonSize}
+                  className="h-11 transition-colors"
+                  variant="tertiary"
+                >
                   Open repo
                 </Button>
               </Link>
-              <Button className="h-11 transition-colors">Go to app</Button>
+              <Button {...buttonSize} className="h-11 transition-colors">
+                Go to app
+              </Button>
             </div>
           </div>
           <WavyBorder />
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
index 81cdbe16..c1337045 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
@@ -115,8 +115,8 @@ const OverviewTabPanel = () => {
   }, [project]);
 
   return (
-    <div className="grid grid-cols-5 gap-[72px]">
-      <div className="col-span-3">
+    <div className="grid grid-cols-5 gap-6 md:gap-[72px]">
+      <div className="col-span-5 md:col-span-3">
         <div className="flex items-center gap-4 mb-6">
           <Avatar
             size={48}
@@ -124,13 +124,13 @@ const OverviewTabPanel = () => {
             imageSrc={project.icon}
             type="blue"
           />
-          <div className="flex-1 space-y-1">
-            <Heading className="text-lg leading-6 font-medium">
+          <div className="flex-1 space-y-1 overflow-hidden">
+            <Heading className="text-lg leading-6 font-medium truncate">
               {project.name}
             </Heading>
-            <span className="text-sm text-elements-low-em tracking-tight">
+            <p className="text-sm text-elements-low-em tracking-tight truncate">
               {project.subDomain}
-            </span>
+            </p>
           </div>
         </div>
         <OverviewInfo label="Domain" icon={<GlobeIcon />}>