diff --git a/apps/frontend/src/app/(app)/(site)/billing/page.tsx b/apps/frontend/src/app/(app)/(site)/billing/page.tsx
index bb879c108..f17d2f87d 100644
--- a/apps/frontend/src/app/(app)/(site)/billing/page.tsx
+++ b/apps/frontend/src/app/(app)/(site)/billing/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 };
 export default async function Page() {
   return (
-    <div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
+    <div className="bg-newBgColorInner flex-1 flex-col flex p-[12px] md:p-[20px] gap-[8px] md:gap-[12px]">
       <BillingComponent />
     </div>
   );
diff --git a/apps/frontend/src/app/(app)/(site)/integrations/social/layout.tsx b/apps/frontend/src/app/(app)/(site)/integrations/social/layout.tsx
index 124e0fece..a194763c2 100644
--- a/apps/frontend/src/app/(app)/(site)/integrations/social/layout.tsx
+++ b/apps/frontend/src/app/(app)/(site)/integrations/social/layout.tsx
@@ -9,7 +9,7 @@ export default async function IntegrationLayout({
 
   return (
     <div className="bg-newBgColorInner p-[20px] flex flex-col transition-all flex-1">
-      <div className="text-6xl text-center mt-[50px]">
+      <div className="text-3xl md:text-6xl text-center mt-[50px]">
         {t('adding_channel_redirecting_you', 'Adding channel, Redirecting You')}
         {children}
       </div>
diff --git a/apps/frontend/src/app/(app)/auth/layout.tsx b/apps/frontend/src/app/(app)/auth/layout.tsx
index 9fcbfa8a0..325070256 100644
--- a/apps/frontend/src/app/(app)/auth/layout.tsx
+++ b/apps/frontend/src/app/(app)/auth/layout.tsx
@@ -15,13 +15,13 @@ export default async function AuthLayout({
   const t = await getT();
 
   return (
-    <div className="bg-[#0E0E0E] flex flex-1 p-[12px] gap-[12px] min-h-screen w-screen text-white">
+    <div className="bg-[#0E0E0E] flex flex-1 p-[12px] gap-[12px] min-h-screen w-full text-white">
       {/*<style>{`html, body {overflow-x: hidden;}`}</style>*/}
       <ReturnUrlComponent />
-      <div className="flex flex-col py-[40px] px-[20px] flex-1 lg:w-[600px] lg:flex-none rounded-[12px] text-white p-[12px] bg-[#1A1919]">
-        <div className="w-full max-w-[440px] mx-auto justify-center gap-[20px] h-full flex flex-col text-white">
+      <div className="flex flex-col py-[40px] px-[20px] md:px-[40px] flex-1 lg:w-[600px] lg:flex-none rounded-[12px] text-white bg-[#1A1919] overflow-y-auto">
+        <div className="w-full max-w-[440px] mx-auto justify-center gap-[20px] h-fit min-h-full flex flex-col text-white py-4">
           <LogoTextComponent />
-          <div className="flex">{children}</div>
+          <div className="flex flex-col flex-1">{children}</div>
         </div>
       </div>
       <div className="text-[36px] flex-1 pt-[88px] hidden lg:flex flex-col items-center">
diff --git a/apps/frontend/src/app/(app)/layout.tsx b/apps/frontend/src/app/(app)/layout.tsx
index 4a60fc05d..4fa14f0db 100644
--- a/apps/frontend/src/app/(app)/layout.tsx
+++ b/apps/frontend/src/app/(app)/layout.tsx
@@ -73,9 +73,9 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
           transloadit={
             process.env.TRANSLOADIT_AUTH && process.env.TRANSLOADIT_TEMPLATE
               ? [
-                  process.env.TRANSLOADIT_AUTH!,
-                  process.env.TRANSLOADIT_TEMPLATE!,
-                ]
+                process.env.TRANSLOADIT_AUTH!,
+                process.env.TRANSLOADIT_TEMPLATE!,
+              ]
               : []
           }
         >
diff --git a/apps/frontend/src/app/global.scss b/apps/frontend/src/app/global.scss
index 5a524d1fb..cfb5220a5 100644
--- a/apps/frontend/src/app/global.scss
+++ b/apps/frontend/src/app/global.scss
@@ -6,25 +6,28 @@
 @import '@uppy/core/dist/style.css';
 @import '@uppy/dashboard/dist/style.css';
 
+// Basic root settings
+html,
 body {
+  overflow-x: hidden;
   background: var(--new-bgColor) !important;
   color: var(--new-btn-text);
-}
-
-body * {
-  outline: none !important;
+  min-width: 100%;
 }
 
 .box {
   position: relative;
 }
+
 .box span {
   position: relative;
   z-index: 2;
 }
+
 #tooltip {
   z-index: 10000;
 }
+
 .box:after {
   border-radius: 50px;
   width: 100%;
@@ -42,35 +45,74 @@ body * {
 .showbox {
   @apply text-primary;
 }
+
 .showbox:after {
   @apply bg-textColor;
   opacity: 1;
   transition: all 0.3s ease-in-out;
 }
+
 .table1 {
   width: 100%;
   border-collapse: collapse;
+  font-size: 14px;
+
+  @media (max-width: 768px) {
+    font-size: 12px;
+  }
+
+  @media (max-width: 640px) {
+    font-size: 10px;
+  }
 }
 
 .table1 thead {
   @apply bg-customColor8 border-b border-b-fifth;
   height: 44px;
   font-size: 12px;
+
+  @media (max-width: 640px) {
+    height: 36px;
+    font-size: 10px;
+  }
 }
+
 .table1 thead th,
 .table1 tbody td {
   text-align: left;
   padding: 14px 24px;
+
+  @media (max-width: 768px) {
+    padding: 10px 16px;
+  }
+
+  @media (max-width: 640px) {
+    padding: 8px 12px;
+  }
 }
 
 .table1 tbody td {
   padding: 16px 24px;
   font-size: 14px;
+
+  @media (max-width: 768px) {
+    padding: 12px 16px;
+    font-size: 12px;
+  }
+
+  @media (max-width: 640px) {
+    padding: 8px 12px;
+    font-size: 11px;
+  }
 }
 
 .swal2-modal {
   @apply bg-primary #{!important};
   @apply border-b-[2px] border-b-sixth;
+
+  @media (max-width: 768px) {
+    max-width: 90vw !important;
+  }
 }
 
 .swal2-modal * {
@@ -84,6 +126,7 @@ body * {
 .swal2-cancel {
   @apply text-white #{!important};
 }
+
 .swal2-confirm {
   @apply bg-customColor50 #{!important};
   @apply text-white #{!important};
@@ -108,11 +151,23 @@ body * {
   display: flex;
   align-items: center;
   margin-right: 0 !important;
+  width: 100%;
+
+  @media (max-width: 640px) {
+    height: 36px;
+    font-size: 12px;
+    padding-left: 12px;
+  }
 }
 
 .react-tags input {
   @apply placeholder-textColor;
   font-size: 14px;
+  width: 100%;
+
+  @media (max-width: 640px) {
+    font-size: 12px;
+  }
 }
 
 .react-tags.is-active {
@@ -172,20 +227,18 @@ body * {
   display: inline-block;
   width: 0.65rem;
   height: 0.65rem;
-  clip-path: polygon(
-    10% 0,
-    0 10%,
-    40% 50%,
-    0 90%,
-    10% 100%,
-    50% 60%,
-    90% 100%,
-    100% 90%,
-    60% 50%,
-    100% 10%,
-    90% 0,
-    50% 40%
-  );
+  clip-path: polygon(10% 0,
+      0 10%,
+      40% 50%,
+      0 90%,
+      10% 100%,
+      50% 60%,
+      90% 100%,
+      100% 90%,
+      60% 50%,
+      100% 10%,
+      90% 0,
+      50% 40%);
   margin-left: 0.5rem;
   font-size: 0.875rem;
   @apply bg-customColor53;
@@ -293,6 +346,7 @@ body * {
   font-size: 20px !important;
   font-weight: 400 !important;
 }
+
 .auto-width {
   width: auto !important;
 }
@@ -309,13 +363,14 @@ body * {
   z-index: 9999 !important;
 }
 
-:empty + .existing-empty {
+:empty+.existing-empty {
   display: none;
 }
 
 .mantine-Paper-root {
   outline: none !important;
 }
+
 //
 //:root {
 //  --copilot-kit-primary-color: #612ad5 !important;
@@ -386,17 +441,19 @@ body * {
 }
 
 .uppy-ProgressBar-inner[style='width: 0%;'],
-.uppy-ProgressBar-inner[style='width: 0%;'] + div {
+.uppy-ProgressBar-inner[style='width: 0%;']+div {
   opacity: 0;
 }
+
 .uppy-ProgressBar-inner[style='width: 100%;'],
-.uppy-ProgressBar-inner[style='width: 100%;'] + div {
+.uppy-ProgressBar-inner[style='width: 100%;']+div {
   @apply animate-normalFadeOut;
 }
 
 .fill-text-textColor {
   -webkit-text-fill-color: white !important;
 }
+
 div div .set-font-family {
   font-family: 'Helvetica Neue', Helvetica !important;
   font-stretch: 100% !important;
@@ -431,6 +488,7 @@ div div .set-font-family {
   animation: loading 4s linear 0s infinite;
   filter: blur(0.4px);
 }
+
 @keyframes loading {
   0% {
     max-width: 0;
@@ -441,7 +499,7 @@ div div .set-font-family {
   display: none;
 }
 
-.tags-top > div {
+.tags-top>div {
   flex: 1;
   margin-right: 20px;
   border: 0 !important;
@@ -477,7 +535,7 @@ div div .set-font-family {
 
 .tags-top .react-tags__list,
 .tags-top .react-tags__list li,
-.tags-top .react-tags__list li > div {
+.tags-top .react-tags__list li>div {
   height: 35px;
 }
 
@@ -485,7 +543,7 @@ div div .set-font-family {
   z-index: 1000 !important;
 }
 
-.tags-top .react-tags__list-item > div {
+.tags-top .react-tags__list-item>div {
   display: flex;
   align-items: center;
   padding-left: 5px;
@@ -507,6 +565,7 @@ html[dir='rtl'] .lbox {
 html[dir='rtl'] [dir='ltr'] {
   direction: rtl !important;
 }
+
 //
 .uppy-Dashboard-AddFiles {
   display: none !important;
@@ -527,12 +586,15 @@ html[dir='rtl'] [dir='ltr'] {
   display: none !important;
   opacity: 0 !important;
 }
+
 .bigWrap .uppy-StatusBar {
   height: 32px !important;
 }
+
 .uppy-StatusBar {
   //@apply bg-customColor55;
 }
+
 //
 //.uppy-Dashboard-inner {
 //  height: 70px !important;
@@ -540,6 +602,7 @@ html[dir='rtl'] [dir='ltr'] {
 .uppy-Dashboard-files {
   display: none;
 }
+
 //
 .uppy-DashboardContent-bar {
   display: none !important;
@@ -549,8 +612,8 @@ html[dir='rtl'] [dir='ltr'] {
   display: block;
 }
 
-.uppy-StatusBar-content {
-}
+.uppy-StatusBar-content {}
+
 //
 //.uppy-StatusBar-content {
 //  padding: 0 !important;
@@ -608,13 +671,11 @@ html[dir='rtl'] [dir='ltr'] {
 }
 
 .repeated-strip {
-  background: repeating-linear-gradient(
-    135deg,
-    var(--new-bgColorInner),
-    var(--new-bgColorInner) 4px,
-    var(--new-big-strips) 4px,
-    var(--new-big-strips) 8px
-  );
+  background: repeating-linear-gradient(135deg,
+      var(--new-bgColorInner),
+      var(--new-bgColorInner) 4px,
+      var(--new-big-strips) 4px,
+      var(--new-big-strips) 8px);
 }
 
 .mantine-Modal-inner {
@@ -661,6 +722,7 @@ html[dir='rtl'] [dir='ltr'] {
     @apply underline;
   }
 }
+
 .tiptap {
   :first-child {
     margin-top: 0;
@@ -671,14 +733,17 @@ html[dir='rtl'] [dir='ltr'] {
     border-radius: 0.4rem;
     box-decoration-break: clone;
     color: #ae8afc;
+
     &::after {
       content: '\200B';
     }
   }
 }
+
 .blur-xs {
   filter: blur(4px);
 }
+
 .blur-s {
   filter: blur(5px);
 }
@@ -692,9 +757,11 @@ html[dir='rtl'] [dir='ltr'] {
     width: 100% !important;
   }
 }
+
 .rm-bg .b2 {
   padding-top: 0 !important;
 }
+
 .rm-bg .b1 {
   background: transparent !important;
   gap: 0 !important;
@@ -712,6 +779,7 @@ html[dir='rtl'] [dir='ltr'] {
   0% {
     transform: translateY(0);
   }
+
   100% {
     transform: translateY(-50%);
   }
@@ -721,6 +789,7 @@ html[dir='rtl'] [dir='ltr'] {
   0% {
     transform: translateY(-50%);
   }
+
   100% {
     transform: translateY(0%);
   }
@@ -755,7 +824,8 @@ html[dir='rtl'] [dir='ltr'] {
 .btnSub:disabled .arrow-change {
   display: none !important;
 }
-.btnSub:disabled + button {
+
+.btnSub:disabled+button {
   display: none !important;
 }
 
@@ -768,8 +838,23 @@ html[dir='rtl'] [dir='ltr'] {
 }
 
 .w8-max {
-  width: calc(100% / 6);
-  max-width: calc(100% / 6);
+  width: 50%;
+  max-width: 50%;
+
+  @media (min-width: 480px) {
+    width: 33.33%;
+    max-width: 33.33%;
+  }
+
+  @media (min-width: 768px) {
+    width: 25%;
+    max-width: 25%;
+  }
+
+  @media (min-width: 1024px) {
+    width: calc(100% / 6);
+    max-width: calc(100% / 6);
+  }
 }
 
 .withp3 {
@@ -780,4 +865,260 @@ html[dir='rtl'] [dir='ltr'] {
 .forceChange .changeColor {
   background: var(--new-btn-primary) !important;
   color: #fff !important;
+}
+
+// ==========================================
+// RESPONSIVE IMPROVEMENTS
+// ==========================================
+
+// Grid responsive for all screens
+.grid {
+  width: 100%;
+
+  @media (max-width: 1024px) {
+    grid-auto-flow: dense;
+  }
+}
+
+// Calendar responsive (Month View)
+.grid-cols-7 {
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(2, minmax(140px, 1fr));
+    overflow-x: auto;
+  }
+}
+
+// Modal responsive
+.swal2-modal {
+  @media (max-width: 1024px) {
+    max-width: 95vw !important;
+    margin: 0 auto !important;
+  }
+
+  @media (max-width: 768px) {
+    max-width: 100vw !important;
+    border-radius: 0 !important;
+    height: auto !important;
+    min-height: 80vh !important;
+  }
+}
+
+// Scrollable containers responsive
+.scrollbar {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+
+    @media (max-width: 768px) {
+      width: 6px;
+      height: 6px;
+    }
+  }
+}
+
+// Button responsive
+button,
+[role="button"] {
+  transition: all 0.2s ease-in-out;
+
+  @media (hover: none) {
+
+    // Mobile devices without hover
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+}
+
+// Input and form responsive
+input,
+textarea,
+select {
+  font-size: 16px; // Prevent zoom on iOS
+
+  @media (max-width: 768px) {
+    font-size: 14px;
+  }
+
+  @media (max-width: 640px) {
+    font-size: 16px; // Keep 16px on mobile for iOS
+  }
+}
+
+// Flex containers responsive helper
+.flex-mobile-wrap {
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+  }
+}
+
+// Tables responsive
+.table1 {
+  @media (max-width: 768px) {
+    display: block;
+    border: none;
+
+    thead {
+      display: none;
+    }
+
+    tbody {
+      display: block;
+
+      td {
+        display: block;
+        padding: 8px 0;
+        text-align: left;
+
+        &:before {
+          content: attr(data-label);
+          font-weight: bold;
+          display: inline-block;
+          width: 120px;
+          margin-right: 8px;
+        }
+      }
+    }
+
+    tr {
+      display: block;
+      margin-bottom: 16px;
+      border: 1px solid var(--color-table-border);
+      border-radius: 4px;
+      padding: 8px;
+    }
+  }
+}
+
+// Vertical stacking on mobile
+@media (max-width: 768px) {
+  .flex-col-mobile {
+    flex-direction: column;
+  }
+
+  .gap-mobile {
+    gap: 12px;
+  }
+}
+
+// Touch-friendly spacing
+@media (hover: none) {
+
+  // Increase tap target size on mobile
+  button,
+  [role="button"],
+  a,
+  input[type="checkbox"],
+  input[type="radio"] {
+    min-height: 44px;
+    min-width: 44px;
+    padding: max(8px, calc((44px - 1em) / 2)) 12px;
+  }
+}
+
+// Overflow handling
+.overflow-x-auto {
+  -webkit-overflow-scrolling: touch;
+
+  @media (max-width: 768px) {
+    // Ensure proper overflow on mobile
+    max-width: 100vw;
+    margin-left: -12px;
+    margin-right: -12px;
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
+// Text responsiveness refinements
+h1,
+h2,
+h3 {
+  letter-spacing: -0.02em;
+
+  @media (max-width: 768px) {
+    margin-bottom: 0.5rem;
+  }
+}
+
+// Calendar view responsive
+.absolute {
+  &.bottom-\[100\%\] {
+    @media (max-width: 768px) {
+      bottom: auto !important;
+      top: 100% !important;
+    }
+  }
+}
+
+// Prevent layout shift on scrollbar
+html {
+  scrollbar-gutter: stable;
+}
+
+// Disable zoom on iOS for input focus
+input[type="text"],
+input[type="email"],
+input[type="password"],
+textarea {
+  font-size: 16px !important;
+
+  @media (max-width: 640px) {
+    font-size: 16px !important; // Prevent zoom
+  }
+}
+
+// Modal responsive improvements
+.swal2-modal {
+  &.swal2-modal {
+    @media (max-width: 640px) {
+      width: 100vw !important;
+      max-height: 100vh !important;
+      border-radius: 0 !important;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+  }
+}
+
+// Scrollable with proper mobile support
+.scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-fifth) var(--new-bgColor);
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--new-bgColor);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-fifth);
+    border-radius: 4px;
+
+    &:hover {
+      background: var(--color-sixth);
+    }
+  }
+}
+
+// Calendar week grid responsive
+.calendar-week-grid {
+  display: grid;
+  grid-template-columns: 80px repeat(7, minmax(150px, 1fr));
+
+  @media (min-width: 768px) {
+    grid-template-columns: 100px repeat(7, minmax(0, 1fr));
+  }
+
+  @media (min-width: 1280px) {
+    grid-template-columns: 136px repeat(7, minmax(0, 1fr));
+  }
 }
\ No newline at end of file
diff --git a/apps/frontend/src/components/agents/agent.tsx b/apps/frontend/src/components/agents/agent.tsx
index e4ca8b1f9..22e5f6ee8 100644
--- a/apps/frontend/src/components/agents/agent.tsx
+++ b/apps/frontend/src/components/agents/agent.tsx
@@ -43,7 +43,7 @@ export const MediaPortal: FC<{
   const t = useT();
   if (!waitForClass) return null;
   return (
-    <div className="pl-[14px] pr-[24px] whitespace-nowrap editor rm-bg">
+    <div className="pl-[14px] pr-[24px] whitespace-nowrap editor rm-bg overflow-x-auto scrollbar-hide">
       <MultiMediaComponent
         allData={[{ content: value }]}
         text={value}
@@ -53,8 +53,8 @@ export const MediaPortal: FC<{
         dummy={false}
         name="image"
         onChange={setMedia}
-        onOpen={() => {}}
-        onClose={() => {}}
+        onOpen={() => { }}
+        onClose={() => { }}
       />
     </div>
   );
@@ -107,13 +107,13 @@ export const AgentList: FC<{ onChange: (arr: any[]) => void }> = ({
   return (
     <div
       className={clsx(
-        'trz bg-newBgColorInner flex flex-col gap-[15px] transition-all relative',
-        collapseMenu === '1' ? 'group sidebar w-[100px]' : 'w-[260px]'
+        'trz bg-newBgColorInner flex md:flex-col flex-row gap-[16px] md:gap-[15px] transition-all relative overflow-x-auto md:overflow-x-visible md:overflow-y-auto scrollbar-hide shrink-0 items-center md:items-stretch md:p-0 md:bg-transparent shadow-sm md:shadow-none',
+        collapseMenu === '1' ? 'group sidebar w-full md:w-[100px]' : 'w-full md:w-[260px]'
       )}
     >
-      <div className="absolute top-0 start-0 w-full h-full p-[20px] overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor">
-        <div className="flex items-center">
-          <h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500] mb-[15px]">
+      <div className="md:absolute md:top-0 md:start-0 w-full md:h-full p-[16px] md:p-[20px] md:overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor flex flex-row md:flex-col gap-[12px] md:gap-0">
+        <div className="flex items-center hidden md:flex">
+          <h2 className="group-[.sidebar]:hidden flex-1 text-[16px] md:text-[20px] font-[500] mb-[12px] md:mb-[15px]">
             {t('select_channels', 'Select Channels')}
           </h2>
           <div
@@ -137,14 +137,15 @@ export const AgentList: FC<{ onChange: (arr: any[]) => void }> = ({
             </svg>
           </div>
         </div>
-        <div className={clsx('flex flex-col gap-[15px]')}>
+        <div className={clsx('flex flex-row md:flex-col gap-[12px] md:gap-[15px] flex-1')}>
           {sortedIntegrations.map((integration, index) => (
             <div
               onClick={setIntegration(integration)}
               key={integration.id}
               className={clsx(
-                'flex gap-[12px] items-center group/profile justify-center hover:bg-boxHover rounded-e-[8px] hover:opacity-100 cursor-pointer',
-                !selected.some((p) => p.id === integration.id) && 'opacity-20'
+                'flex gap-[10px] md:gap-[12px] items-center group/profile justify-center hover:bg-boxHover rounded-[8px] md:rounded-s-none md:rounded-e-[8px] hover:opacity-100 cursor-pointer px-4 md:px-0 py-2 md:py-0 bg-sixth md:bg-transparent min-w-fit md:min-w-0 transition-all',
+                !selected.some((p) => p.id === integration.id) && 'opacity-50 md:opacity-20',
+                selected.some((p) => p.id === integration.id) && 'bg-boxHover md:bg-transparent shadow-sm md:shadow-none'
               )}
             >
               <div
@@ -161,7 +162,7 @@ export const AgentList: FC<{ onChange: (arr: any[]) => void }> = ({
                     <div className="bg-primary/60 w-[39px] h-[46px] start-0 top-0 absolute rounded-full z-[199]" />
                   </div>
                 )}
-                <div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity">
+                <div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity hidden md:block">
                   <SVGLine />
                 </div>
                 <ImageWithFallback
@@ -202,9 +203,11 @@ export const Agent: FC<{ children: ReactNode }> = ({ children }) => {
 
   return (
     <PropertiesContext.Provider value={{ properties }}>
-      <AgentList onChange={setProperties} />
-      <div className="bg-newBgColorInner flex flex-1">{children}</div>
-      <Threads />
+      <div className="flex flex-col md:flex-row w-full h-full overflow-hidden">
+        <AgentList onChange={setProperties} />
+        <div className="bg-newBgColorInner flex flex-1 overflow-hidden relative">{children}</div>
+        <Threads />
+      </div>
     </PropertiesContext.Provider>
   );
 };
@@ -224,12 +227,11 @@ const Threads: FC = () => {
   return (
     <div
       className={clsx(
-        'trz bg-newBgColorInner flex flex-col gap-[15px] transition-all relative',
-        'w-[260px]'
+        'trz bg-newBgColorInner flex md:flex-col flex-row gap-[16px] md:gap-[15px] transition-all relative w-full md:w-[260px] md:p-0 overflow-x-auto md:overflow-x-visible md:overflow-y-auto scrollbar-hide shrink-0 items-center md:items-stretch md:bg-transparent shadow-sm md:shadow-none'
       )}
     >
-      <div className="absolute top-0 start-0 w-full h-full p-[20px] overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor">
-        <div className="mb-[15px] justify-center flex group-[.sidebar]:pb-[15px]">
+      <div className="md:absolute md:top-0 md:start-0 w-full md:h-full p-[16px] md:p-[20px] md:overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor flex flex-row md:flex-col gap-[12px] md:gap-[15px]">
+        <div className="mb-[15px] justify-center flex group-[.sidebar]:pb-[15px] hidden md:flex">
           <Link
             href={`/agents`}
             className="text-white whitespace-nowrap flex-1 pt-[12px] pb-[14px] ps-[16px] pe-[20px] group-[.sidebar]:p-0 min-h-[44px] max-h-[44px] rounded-md bg-btnPrimary flex justify-center items-center gap-[5px] outline-none"
@@ -255,12 +257,37 @@ const Threads: FC = () => {
             </div>
           </Link>
         </div>
-        <div className="flex flex-col gap-[1px]">
+
+        {/* Mobile New Chat Button */}
+        <Link
+          href={`/agents`}
+          className="text-white whitespace-nowrap min-w-[44px] min-h-[44px] rounded-md bg-btnPrimary flex justify-center items-center gap-[5px] outline-none md:hidden px-4"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="21"
+            height="20"
+            viewBox="0 0 21 20"
+            fill="none"
+            className="min-w-[21px] min-h-[20px]"
+          >
+            <path
+              d="M10.5001 4.16699V15.8337M4.66675 10.0003H16.3334"
+              stroke="white"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <div className="text-[14px]">New Chat</div>
+        </Link>
+
+        <div className="flex flex-row md:flex-col gap-[10px] md:gap-[1px] shrink-0">
           {data?.threads?.map((p: any) => (
             <Link
               className={clsx(
-                'overflow-ellipsis overflow-hidden whitespace-nowrap hover:bg-newBgColor px-[10px] py-[6px] rounded-[10px] cursor-pointer',
-                p.id === id && 'bg-newBgColor'
+                'overflow-ellipsis overflow-hidden whitespace-nowrap hover:bg-newBgColor px-[10px] py-[6px] rounded-[10px] cursor-pointer min-w-fit md:min-w-0 bg-sixth md:bg-transparent',
+                p.id === id && 'bg-newBgColor text-white'
               )}
               href={`/agents/${p.id}`}
               key={p.id}
diff --git a/apps/frontend/src/components/auth/login.tsx b/apps/frontend/src/components/auth/login.tsx
index 793fc92e6..0fbce2bb1 100644
--- a/apps/frontend/src/components/auth/login.tsx
+++ b/apps/frontend/src/components/auth/login.tsx
@@ -65,7 +65,7 @@ export function Login() {
       <form className="flex-1 flex" onSubmit={form.handleSubmit(onSubmit)}>
         <div className="flex flex-col flex-1">
           <div>
-            <h1 className="text-[40px] font-[500] -tracking-[0.8px] text-start cursor-pointer">
+            <h1 className="text-[28px] md:text-[40px] font-[500] -tracking-[0.8px] text-start cursor-pointer">
               {t('sign_in', 'Sign In')}
             </h1>
           </div>
diff --git a/apps/frontend/src/components/auth/register.tsx b/apps/frontend/src/components/auth/register.tsx
index 592c354e1..2ad98ae29 100644
--- a/apps/frontend/src/components/auth/register.tsx
+++ b/apps/frontend/src/components/auth/register.tsx
@@ -147,7 +147,7 @@ export function RegisterAfter({
       <form className="flex-1 flex" onSubmit={form.handleSubmit(onSubmit)}>
         <div className="flex flex-col flex-1">
           <div>
-            <h1 className="text-[40px] font-[500] -tracking-[0.8px] text-start cursor-pointer">
+            <h1 className="text-[28px] md:text-[40px] font-[500] -tracking-[0.8px] text-start cursor-pointer">
               {t('sign_up', 'Sign Up')}
             </h1>
           </div>
diff --git a/apps/frontend/src/components/launches/add.provider.component.tsx b/apps/frontend/src/components/launches/add.provider.component.tsx
index 6207ecf03..5ef2cf197 100644
--- a/apps/frontend/src/components/launches/add.provider.component.tsx
+++ b/apps/frontend/src/components/launches/add.provider.component.tsx
@@ -244,8 +244,8 @@ export const CustomVariables: FC<{
         ...acc,
         ...(item.defaultValue
           ? {
-              [item.key]: item.defaultValue,
-            }
+            [item.key]: item.defaultValue,
+          }
           : {}),
       }),
       {}
@@ -318,17 +318,17 @@ export const AddProviderComponent: FC<{
   const modal = useModals();
   const getSocialLink = useCallback(
     (
-        identifier: string,
-        isExternal: boolean,
-        isWeb3: boolean,
-        customFields?: Array<{
-          key: string;
-          label: string;
-          validation: string;
-          defaultValue?: string;
-          type: 'text' | 'password';
-        }>
-      ) =>
+      identifier: string,
+      isExternal: boolean,
+      isWeb3: boolean,
+      customFields?: Array<{
+        key: string;
+        label: string;
+        validation: string;
+        defaultValue?: string;
+        type: 'text' | 'password';
+      }>
+    ) =>
       async () => {
         const onboardingParam = onboarding ? 'onboarding=true' : '';
         const openWeb3 = async () => {
@@ -362,7 +362,8 @@ export const AddProviderComponent: FC<{
           ].filter(Boolean).join('&');
           const { url, err } = await (
             await fetch(
-              `/integrations/social/${identifier}${params ? `?${params}` : ''}`
+              `/integrations/social/${identifier}${externalUrl ? `?externalUrl=${externalUrl}` : ``
+              }`
             )
           ).json();
           if (err) {
@@ -430,7 +431,7 @@ export const AddProviderComponent: FC<{
   return (
     <div className="w-full flex flex-col gap-[20px] rounded-[4px] relative]">
       <div className="flex flex-col">
-        <div className={clsx("grid grid-cols-5 gap-[10px] justify-items-center justify-center", onboarding ? 'grid-cols-9' : 'grid-cols-5')}>
+        <div className={clsx("grid grid-cols-2 xs:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-[10px] justify-items-center justify-center", onboarding ? 'grid-cols-9' : 'grid-cols-5')}>
           {social.map((item) => (
             <div
               key={item.identifier}
@@ -442,12 +443,12 @@ export const AddProviderComponent: FC<{
               )}
               {...(!!item.toolTip
                 ? {
-                    'data-tooltip-id': 'tooltip',
-                    'data-tooltip-content': item.toolTip,
-                  }
+                  'data-tooltip-id': 'tooltip',
+                  'data-tooltip-content': item.toolTip,
+                }
                 : {})}
               className={
-                'w-full h-[100px] text-[14px] p-[10px] rounded-[8px] bg-newTableHeader text-textColor relative justify-center items-center flex flex-col gap-[10px] cursor-pointer'
+                'w-full min-h-[110px] text-[14px] p-[10px] rounded-[8px] bg-newTableHeader text-textColor relative justify-center items-center flex flex-col gap-[10px] cursor-pointer'
               }
             >
               <div>
@@ -469,7 +470,7 @@ export const AddProviderComponent: FC<{
                     viewBox="0 0 26 26"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
-                    className="absolute top-[10px] end-[10px]"
+                    className="absolute top-[5px] end-[5px]"
                   >
                     <path
                       d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9964 9.5533 24.6256 6.24882 22.1884 3.81163C19.7512 1.37445 16.4467 0.00363977 13 0ZM13 21C12.7033 21 12.4133 20.912 12.1667 20.7472C11.92 20.5824 11.7277 20.3481 11.6142 20.074C11.5007 19.7999 11.471 19.4983 11.5288 19.2074C11.5867 18.9164 11.7296 18.6491 11.9393 18.4393C12.1491 18.2296 12.4164 18.0867 12.7074 18.0288C12.9983 17.9709 13.2999 18.0007 13.574 18.1142C13.8481 18.2277 14.0824 18.42 14.2472 18.6666C14.412 18.9133 14.5 19.2033 14.5 19.5C14.5 19.8978 14.342 20.2794 14.0607 20.5607C13.7794 20.842 13.3978 21 13 21ZM14 14.91V15C14 15.2652 13.8946 15.5196 13.7071 15.7071C13.5196 15.8946 13.2652 16 13 16C12.7348 16 12.4804 15.8946 12.2929 15.7071C12.1054 15.5196 12 15.2652 12 15V14C12 13.7348 12.1054 13.4804 12.2929 13.2929C12.4804 13.1054 12.7348 13 13 13C14.6538 13 16 11.875 16 10.5C16 9.125 14.6538 8 13 8C11.3463 8 10 9.125 10 10.5V11C10 11.2652 9.89465 11.5196 9.70711 11.7071C9.51958 11.8946 9.26522 12 9.00001 12C8.73479 12 8.48044 11.8946 8.2929 11.7071C8.10536 11.5196 8.00001 11.2652 8.00001 11V10.5C8.00001 8.01875 10.2425 6 13 6C15.7575 6 18 8.01875 18 10.5C18 12.6725 16.28 14.4913 14 14.91Z"
diff --git a/apps/frontend/src/components/launches/calendar.tsx b/apps/frontend/src/components/launches/calendar.tsx
index c21438219..5651c8d57 100644
--- a/apps/frontend/src/components/launches/calendar.tsx
+++ b/apps/frontend/src/components/launches/calendar.tsx
@@ -142,38 +142,39 @@ export const DayView = () => {
   }, [integrations, posts]);
 
   return (
-    <div className="flex flex-col gap-[10px] flex-1 relative">
-      <div className="absolute start-0 top-0 w-full h-full flex flex-col overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor">
-        {options.map((option) => (
-          <Fragment key={option[0].time}>
-            <div className="text-center text-[14px] min-h-[21px]">
-              {newDayjs()
-                .utc()
-                .startOf('day')
-                .add(option[0].time, 'minute')
-                .local()
-                .format(isUSCitizen() ? 'hh:mm A' : 'LT')}
-            </div>
-            <div
-              key={option[0].time}
-              className="min-h-[60px] rounded-[10px] flex justify-center items-center gap-[10px] mb-[20px]"
-            >
-              <CalendarContext.Provider
-                value={{
-                  ...calendar,
-                  integrations: option.flatMap((p) => p.integration),
-                }}
-              >
-                <CalendarColumn
-                  getDate={currentDay
+    <div className="flex flex-col gap-[10px] flex-1 relative bg-newBgColorInner/20 rounded-[12px] overflow-hidden border border-newTableBorder/10">
+      <div className="absolute start-0 top-0 w-full h-full flex flex-col overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor p-[12px] md:p-[20px]">
+        <div className="flex flex-col gap-[1px] bg-newTableBorder/10 rounded-[8px] overflow-hidden">
+          {options.map((option) => (
+            <div key={option[0].time} className="flex bg-newBgColorInner group hover:bg-newBgColorInner/80 transition-colors">
+              <div className="w-[80px] md:w-[120px] py-[20px] px-[12px] flex items-center justify-center border-e border-newTableBorder/10 bg-newTableHeader/30">
+                <span className="text-[12px] md:text-[14px] font-medium text-newTableText">
+                  {newDayjs()
+                    .utc()
                     .startOf('day')
                     .add(option[0].time, 'minute')
-                    .local()}
-                />
-              </CalendarContext.Provider>
+                    .local()
+                    .format(isUSCitizen() ? 'hh:mm A' : 'LT')}
+                </span>
+              </div>
+              <div className="flex-1 p-[12px] flex items-center gap-[12px] min-h-[80px]">
+                <CalendarContext.Provider
+                  value={{
+                    ...calendar,
+                    integrations: option.flatMap((p) => p.integration),
+                  }}
+                >
+                  <CalendarColumn
+                    getDate={currentDay
+                      .startOf('day')
+                      .add(option[0].time, 'minute')
+                      .local()}
+                  />
+                </CalendarContext.Provider>
+              </div>
             </div>
-          </Fragment>
-        ))}
+          ))}
+        </div>
       </div>
     </div>
   );
@@ -201,47 +202,45 @@ export const WeekView = () => {
   }, [i18next.resolvedLanguage, startDate]);
 
   return (
-    <div className="flex flex-col text-textColor flex-1">
-      <div className="flex-1 relative">
-        <div className="grid [grid-template-columns:136px_repeat(7,_minmax(0,_1fr))] gap-[4px] rounded-[10px] absolute h-full start-0 top-0 w-full overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor">
-          <div className="z-10 bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px] sticky top-0"></div>
+    <div className="flex flex-col text-textColor flex-1 min-w-0 bg-newBgColorInner/20 rounded-[12px] overflow-hidden border border-newTableBorder/10">
+      <div className="flex-1 relative overflow-hidden">
+        <div className="calendar-week-grid gap-[1px] bg-newTableBorder/10 rounded-[10px] absolute h-full start-0 top-0 w-full overflow-auto scrollbar-hide md:scrollbar md:scrollbar-thumb-fifth md:scrollbar-track-newBgColor">
+          <div className="z-[40] bg-newTableHeader flex justify-center items-center flex-col h-[40px] xs:h-[50px] md:h-[62px] sticky top-0 left-0 border-b border-e border-newTableBorder/20 shadow-[2px_0_4px_rgba(0,0,0,0.1)]"></div>
           {localizedDays.map((day, index) => (
             <div
               key={day.name}
-              className="p-2 text-center bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px] sticky top-0 z-[20]"
+              className="p-1 xs:p-2 text-center bg-newTableHeader flex justify-center items-center flex-col h-[40px] xs:h-[50px] md:h-[62px] sticky top-0 z-[30] border-b border-newTableBorder/20 shadow-sm"
             >
-              <div className="text-[14px] font-[500] text-newTableText">
-                {day.name}
+              <div className="text-[10px] xs:text-[11px] md:text-[13px] font-[500] text-newTableText/70 uppercase tracking-wider">
+                {day.name.substring(0, 3)}
               </div>
               <div
                 className={clsx(
-                  'text-[14px] font-[600] flex items-center justify-center gap-[6px]',
-                  day.day === newDayjs().format('L') &&
-                    'text-newTableTextFocused'
+                  'text-[12px] xs:text-[14px] md:text-[16px] font-[600] flex items-center justify-center gap-[2px] xs:gap-[4px] md:gap-[6px]',
+                  day.day === newDayjs().format('L') ? 'text-newTableTextFocused' : 'text-newTableText'
                 )}
               >
                 {day.day === newDayjs().format('L') && (
-                  <div className="w-[6px] h-[6px] bg-newTableTextFocused rounded-full" />
+                  <div className="w-[4px] h-[4px] md:w-[6px] md:h-[6px] bg-newTableTextFocused rounded-full" />
                 )}
-                {day.day}
+                <span>{day.date.date()}</span>
               </div>
             </div>
           ))}
           {hours.map((hour) => (
             <Fragment key={hour}>
-              <div className="p-2 pe-4 text-center items-center justify-center flex text-[14px] text-newTableText">
+              <div className="p-1 xs:p-2 pe-2 xs:pe-4 text-center items-center justify-center flex text-[10px] xs:text-[12px] md:text-[14px] text-newTableText/80 h-[100px] md:h-[120px] sticky left-0 bg-newTableHeader z-[25] border-e border-newTableBorder/10 transition-colors hover:bg-newTableHeader/80">
                 {convertTimeFormatBasedOnLocality(hour)}
               </div>
               {localizedDays.map((day, indexDay) => (
-                <Fragment
+                <div
                   key={`${startDate}-${day.date.format('YYYY-MM-DD')}-${hour}`}
+                  className="relative group border-b border-newTableBorder/5 h-[100px] md:h-[120px] bg-newBgColorInner/40 hover:bg-newBgColorInner/60 transition-colors"
                 >
-                  <div className="relative">
-                    <CalendarColumn
-                      getDate={day.date.hour(hour).startOf('hour')}
-                    />
-                  </div>
-                </Fragment>
+                  <CalendarColumn
+                    getDate={day.date.hour(hour).startOf('hour')}
+                  />
+                </div>
               ))}
             </Fragment>
           ))}
@@ -300,21 +299,24 @@ export const MonthView = () => {
   }, [startDate]);
 
   return (
-    <div className="flex flex-col text-textColor flex-1">
-      <div className="flex-1 flex relative">
-        <div className="grid grid-cols-7 grid-rows-[62px_auto] gap-[4px] rounded-[10px] absolute start-0 top-0 overflow-auto w-full h-full scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary">
+    <div className="flex flex-col text-textColor flex-1 min-w-0 bg-newBgColorInner/20 rounded-[12px] overflow-hidden border border-newTableBorder/10">
+      <div className="flex-1 flex relative overflow-hidden">
+        <div className="grid grid-cols-[repeat(7,minmax(120px,1fr))] gap-[1px] bg-newTableBorder/10 rounded-[10px] absolute start-0 top-0 overflow-auto w-full h-full scrollbar-hide md:scrollbar md:scrollbar-thumb-tableBorder md:scrollbar-track-secondary">
           {localizedDays.map((day) => (
             <div
               key={day}
-              className="z-[20] p-2 bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px] sticky top-0"
+              className="z-[20] p-1 md:p-2 bg-newTableHeader flex justify-center items-center flex-col h-[40px] md:h-[62px] sticky top-0 text-[10px] md:text-[11px] lg:text-[13px] font-semibold text-newTableText/70 uppercase tracking-widest shadow-sm border-b border-newTableBorder/10"
             >
-              <div>{day}</div>
+              <div className="truncate">{day}</div>
             </div>
           ))}
           {calendarDays.map((date, index) => (
             <div
               key={index}
-              className="text-center items-center justify-center flex"
+              className={clsx(
+                "relative group min-h-[100px] md:min-h-[140px] transition-colors hover:bg-newBgColorInner/60",
+                date.label === 'current-month' ? 'bg-newBgColorInner/40' : 'bg-newBgColorInner/10 opacity-50'
+              )}
             >
               <CalendarColumn
                 getDate={newDayjs(date.day).endOf('day')}
@@ -369,11 +371,11 @@ export const CalendarColumn: FC<{
       const check =
         display === 'day'
           ? pList.format('YYYY-MM-DD HH:mm') ===
-            getDate.format('YYYY-MM-DD HH:mm')
+          getDate.format('YYYY-MM-DD HH:mm')
           : display === 'week'
-          ? pList.isSameOrAfter(getDate.startOf('hour')) &&
+            ? pList.isSameOrAfter(getDate.startOf('hour')) &&
             pList.isBefore(getDate.endOf('hour'))
-          : pList.format('DD/MM/YYYY') === getDate.format('DD/MM/YYYY');
+            : pList.format('DD/MM/YYYY') === getDate.format('DD/MM/YYYY');
       return check;
     });
   }, [posts, display, getDate]);
@@ -442,11 +444,11 @@ export const CalendarColumn: FC<{
 
   const editPost = useCallback(
     (
-        loadPost: Post & {
-          integration: Integration;
-        },
-        isDuplicate?: boolean
-      ) =>
+      loadPost: Post & {
+        integration: Integration;
+      },
+      isDuplicate?: boolean
+    ) =>
       async () => {
         const post = {
           ...loadPost,
@@ -480,16 +482,16 @@ export const CalendarColumn: FC<{
               <AddEditModal
                 {...(isDuplicate
                   ? {
-                      onlyValues: data.posts.map(
-                        ({ image, settings, content }: any) => {
-                          return {
-                            image,
-                            settings,
-                            content,
-                          };
-                        }
-                      ),
-                    }
+                    onlyValues: data.posts.map(
+                      ({ image, settings, content }: any) => {
+                        return {
+                          image,
+                          settings,
+                          content,
+                        };
+                      }
+                    ),
+                  }
                   : {})}
                 allIntegrations={integrations.map((p) => ({
                   ...p,
@@ -500,12 +502,12 @@ export const CalendarColumn: FC<{
                   isDuplicate
                     ? integrations
                     : integrations
-                        .slice(0)
-                        .filter((f) => f.id === data.integration)
-                        .map((p) => ({
-                          ...p,
-                          picture: data.integrationPicture,
-                        }))
+                      .slice(0)
+                      .filter((f) => f.id === data.integration)
+                      .map((p) => ({
+                        ...p,
+                        picture: data.integrationPicture,
+                      }))
                 }
                 date={publishDate}
               />
@@ -522,28 +524,28 @@ export const CalendarColumn: FC<{
     const set: any = !sets.length
       ? undefined
       : await new Promise((resolve) => {
-          modal.openModal({
-            title: t('select_set', 'Select a Set'),
-            closeOnClickOutside: true,
-            askClose: true,
-            closeOnEscape: true,
-            withCloseButton: true,
-            onClose: () => resolve('exit'),
-            children: (
-              <SetSelectionModal
-                sets={sets}
-                onSelect={(selectedSet) => {
-                  resolve(selectedSet);
-                  modal.closeAll();
-                }}
-                onContinueWithoutSet={() => {
-                  resolve(undefined);
-                  modal.closeAll();
-                }}
-              />
-            ),
-          });
+        modal.openModal({
+          title: t('select_set', 'Select a Set'),
+          closeOnClickOutside: true,
+          askClose: true,
+          closeOnEscape: true,
+          withCloseButton: true,
+          onClose: () => resolve('exit'),
+          children: (
+            <SetSelectionModal
+              sets={sets}
+              onSelect={(selectedSet) => {
+                resolve(selectedSet);
+                modal.closeAll();
+              }}
+              onContinueWithoutSet={() => {
+                resolve(undefined);
+                modal.closeAll();
+              }}
+            />
+          ),
         });
+      });
 
     if (set === 'exit') return;
 
@@ -569,20 +571,20 @@ export const CalendarColumn: FC<{
           mutate={reloadCalendarView}
           {...(signature?.id && !set
             ? {
-                onlyValues: [
-                  {
-                    content: '\n' + signature.content,
-                  },
-                ],
-              }
+              onlyValues: [
+                {
+                  content: '\n' + signature.content,
+                },
+              ],
+            }
             : {})}
           date={
             randomHour
               ? getDate.hour(Math.floor(Math.random() * 24))
               : getDate.format('YYYY-MM-DDTHH:mm:ss') ===
                 newDayjs().startOf('hour').format('YYYY-MM-DDTHH:mm:ss')
-              ? newDayjs().add(10, 'minute')
-              : getDate
+                ? newDayjs().add(10, 'minute')
+                : getDate
           }
           {...(set?.content ? { set: JSON.parse(set.content) } : {})}
           reopenModal={() => ({})}
@@ -640,17 +642,17 @@ export const CalendarColumn: FC<{
   return (
     <div
       className={clsx(
-        'flex flex-col w-full min-h-full relative',
+        'flex flex-col w-full min-h-full relative transition-all duration-200',
         isBeforeNow && 'repeated-strip',
         loading && 'animate-pulse',
-        isBeforeNow
-          ? 'cursor-not-allowed'
-          : 'border border-newTextColor/5 rounded-[8px]'
+        isBeforeNow ? 'cursor-not-allowed' : 'hover:z-10'
       )}
       ref={drop as any}
     >
       {display === 'month' && (
-        <div className={clsx('pt-[6px] text-[14px]')}>{getDate.date()}</div>
+        <div className={clsx('absolute top-2 right-2 text-[12px] md:text-[14px] font-semibold text-newTableText/50 group-hover:text-newTableTextFocused transition-colors')}>
+          {getDate.date()}
+        </div>
       )}
       <div
         className={clsx(
@@ -695,7 +697,7 @@ export const CalendarColumn: FC<{
           ))}
           {!showAll && postList.length > 3 && (
             <div
-              className="text-center hover:underline py-[5px] text-textColor"
+              className="mt-2 mx-2 p-1.5 bg-newTableBorder/10 rounded-md text-center text-[11px] font-medium text-newTableText hover:bg-newTableBorder/20 hover:text-newTableTextFocused transition-all cursor-pointer shadow-sm"
               onClick={showAllFunc}
             >
               {t('show_more', '+ Show more')} ({postList.length - 3})
@@ -703,7 +705,7 @@ export const CalendarColumn: FC<{
           )}
           {showAll && postList.length > 3 && (
             <div
-              className="text-center hover:underline py-[5px]"
+              className="mt-2 mx-2 p-1.5 bg-newTableBorder/10 rounded-md text-center text-[11px] font-medium text-newTableText hover:bg-newTableBorder/20 hover:text-newTableTextFocused transition-all cursor-pointer shadow-sm"
               onClick={showLessFunc}
             >
               {t('show_less', '- Show less')}
@@ -720,20 +722,25 @@ export const CalendarColumn: FC<{
                 display === ('month' as any)
                   ? 'flex-1 min-h-[40px] w-full'
                   : !postList.length
-                  ? 'min-h-full w-full p-[5px]'
-                  : 'min-h-[40px] w-full',
+                    ? 'min-h-full w-full p-[5px]'
+                    : 'min-h-[40px] w-full',
                 'flex items-center justify-center cursor-pointer pb-[2.5px]'
               )}
             >
               {display !== 'day' && (
                 <div
                   className={clsx(
-                    'group hover:before:h-[30px] w-full h-full rounded-[10px] flex justify-center items-center text-white'
+                    'group/add flex-1 min-h-[40px] w-full flex justify-center items-center'
                   )}
                 >
                   <div
-                    className={`group-hover:before:content-["+"] pb-[5px] flex justify-center items-center rounded-[8px] transition-all group-hover:bg-btnPrimary w-full h-full max-w-[40px] max-h-[40px]`}
-                  />
+                    className="w-8 h-8 rounded-full border border-dashed border-newTableBorder/40 flex items-center justify-center text-newTableBorder/40 group-hover/add:border-btnPrimary group-hover/add:bg-btnPrimary group-hover/add:text-white transition-all duration-300"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <line x1="12" y1="5" x2="12" y2="19"></line>
+                      <line x1="5" y1="12" x2="19" y2="12"></line>
+                    </svg>
+                  </div>
                 </div>
               )}
               {display === 'day' && (
@@ -844,7 +851,7 @@ const CalendarItem: FC<{
     >
       <div
         className={clsx(
-          'text-white text-[11px] max-h-[24px] h-[24px] min-h-[24px] w-full rounded-tr-[10px] rounded-tl-[10px] flex items-center justify-center gap-[10px] px-[5px] bg-btnPrimary'
+          'text-white text-[11px] max-h-[24px] h-[24px] min-h-[24px] w-full rounded-tr-[10px] rounded-tl-[10px] flex items-center justify-between gap-[5px] px-[8px] bg-btnPrimary shadow-sm transition-all duration-200 group-hover:max-h-[32px] group-hover:h-[32px]'
         )}
         style={{
           backgroundColor: post?.tags?.[0]?.tag?.color,
@@ -852,81 +859,83 @@ const CalendarItem: FC<{
       >
         <div
           className={clsx(
-            post?.tags?.[0]?.tag?.color ? 'mix-blend-difference' : '',
-            'group-hover:hidden cursor-pointer'
+            'group-hover:hidden truncate text-[10px] font-bold tracking-tight',
+            post?.tags?.[0]?.tag?.color ? 'mix-blend-difference' : ''
           )}
         >
           {post.tags.map((p) => p.tag.name).join(', ')}
         </div>
-        <div
-          className={clsx(
-            'hidden group-hover:block hover:underline cursor-pointer',
-            post?.tags?.[0]?.tag?.color && 'mix-blend-difference'
-          )}
-          onClick={duplicatePost}
-        >
-          <Duplicate />
-        </div>
-        <div
-          className={clsx(
-            'hidden group-hover:block hover:underline cursor-pointer',
-            post?.tags?.[0]?.tag?.color && 'mix-blend-difference'
-          )}
-          onClick={preview}
-        >
-          <Preview />
-        </div>{' '}
-        {((post.integration.providerIdentifier === 'x' && disableXAnalytics) || !post.releaseId) ? (
-          <></>
-        ) : (
+        <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
           <div
             className={clsx(
-              'hidden group-hover:block hover:underline cursor-pointer',
+              'hover:scale-110 transition-transform cursor-pointer',
               post?.tags?.[0]?.tag?.color && 'mix-blend-difference'
             )}
-            onClick={statistics}
+            onClick={duplicatePost}
           >
-            <Statistics />
+            <Duplicate />
           </div>
-        )}{' '}
-        <div
-          className={clsx(
-            'hidden group-hover:block hover:underline cursor-pointer',
-            post?.tags?.[0]?.tag?.color && 'mix-blend-difference'
+          <div
+            className={clsx(
+              'hover:scale-110 transition-transform cursor-pointer',
+              post?.tags?.[0]?.tag?.color && 'mix-blend-difference'
+            )}
+            onClick={preview}
+          >
+            <Preview />
+          </div>
+          {((post.integration.providerIdentifier === 'x' && disableXAnalytics) || !post.releaseId) ? null : (
+            <div
+              className={clsx(
+                'hover:scale-110 transition-transform cursor-pointer',
+                post?.tags?.[0]?.tag?.color && 'mix-blend-difference'
+              )}
+              onClick={statistics}
+            >
+              <Statistics />
+            </div>
           )}
-          onClick={deletePost}
-        >
-          <DeletePost />
+          <div
+            className={clsx(
+              'hover:scale-110 transition-transform cursor-pointer',
+              post?.tags?.[0]?.tag?.color && 'mix-blend-difference'
+            )}
+            onClick={deletePost}
+          >
+            <DeletePost />
+          </div>
         </div>
       </div>
       <div
         onClick={editPost}
         className={clsx(
-          'gap-[5px] w-full flex h-full flex-1 rounded-br-[10px] rounded-bl-[10px] p-[8px] text-[14px] bg-newColColor',
+          'gap-[8px] w-full flex h-full flex-1 rounded-br-[10px] rounded-bl-[10px] p-[10px] text-[13px] bg-newColColor border-x border-b border-newTableBorder/5 hover:bg-newColColor/80 transition-colors',
           'relative',
-          isBeforeNow && '!grayscale'
+          isBeforeNow && '!grayscale opacity-70'
         )}
       >
-        <div className={clsx('relative min-w-[20px]')}>
+        <div className={clsx('relative min-w-[24px]')}>
           <img
-            className="w-[20px] h-[20px] rounded-[8px]"
+            className="w-[24px] h-[24px] rounded-[8px] shadow-sm"
             src={post.integration.picture! || '/no-picture.jpg'}
           />
-          <img
-            className="w-[12px] h-[12px] rounded-[8px] absolute z-10 top-[10px] end-0 border border-fifth"
-            src={`/icons/platforms/${post.integration?.providerIdentifier}.png`}
-          />
+          <div className="absolute -bottom-1 -right-1 z-10 w-[14px] h-[14px] rounded-full bg-white p-[1px] shadow-sm">
+            <img
+              className="w-full h-full rounded-full"
+              src={`/icons/platforms/${post.integration?.providerIdentifier}.png`}
+            />
+          </div>
         </div>
-        <div className="w-full flex-1 flex flex-col min-h-[40px]">
-          <div className="text-start">
-            {state === 'DRAFT' ? t('draft', 'Draft') + ': ' : ''}
+        <div className="w-full flex-1 flex flex-col min-h-[40px] overflow-hidden">
+          <div className="text-[11px] font-semibold text-newTableText/60 uppercase tracking-tighter">
+            {state === 'DRAFT' ? t('draft', 'Draft') : ''}
           </div>
-            <div className="w-full relative">
-              <div className="absolute top-0 start-0 w-full text-ellipsis break-words line-clamp-1 text-start">
-                {stripHtmlValidation('none', post.content, false, true, false) ||
-                  t('no_content', 'no content')}
-              </div>
+          <div className="w-full relative mt-0.5">
+            <div className="text-ellipsis break-words line-clamp-2 text-start leading-snug font-medium text-newTableText/90">
+              {stripHtmlValidation('none', post.content, false, true, false) ||
+                t('no_content', 'no content')}
             </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/apps/frontend/src/components/launches/filters.tsx b/apps/frontend/src/components/launches/filters.tsx
index 43332f122..130dde42f 100644
--- a/apps/frontend/src/components/launches/filters.tsx
+++ b/apps/frontend/src/components/launches/filters.tsx
@@ -225,12 +225,12 @@ export const Filters = () => {
   );
 
   return (
-    <div className="text-textColor flex flex-col md:flex-row gap-[8px] items-center select-none">
-      <div className="flex flex-grow flex-row items-center gap-[10px]">
-        <div className="border h-[42px] border-newTableBorder bg-newTableBorder gap-[1px] flex items-center rounded-[8px] overflow-hidden">
+    <div className="text-textColor flex flex-col xl:flex-row gap-[12px] items-stretch xl:items-center select-none w-full overflow-x-hidden">
+      <div className="flex flex-row items-center gap-[8px] w-full xl:w-auto min-w-0">
+        <div className="border h-[42px] border-newTableBorder bg-newTableBorder gap-[1px] flex flex-1 xl:flex-none items-center rounded-[8px] overflow-hidden">
           <div
             onClick={previous}
-            className="cursor-pointer text-textColor rtl:rotate-180 px-[9px] bg-newBgColorInner h-full flex items-center justify-center hover:text-textItemFocused hover:bg-boxFocused"
+            className="cursor-pointer text-textColor rtl:rotate-180 px-[12px] bg-newBgColorInner h-full flex items-center justify-center hover:text-textItemFocused hover:bg-boxFocused transition-colors shrink-0"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -248,14 +248,14 @@ export const Filters = () => {
               />
             </svg>
           </div>
-          <div className="w-[200px] text-center bg-newBgColorInner h-full flex items-center justify-center">
-            <div className="py-[3px] px-[9px] rounded-[5px] transition-all text-[14px]">
+          <div className="flex-1 xl:w-[220px] text-center bg-newBgColorInner h-full flex items-center justify-center truncate px-2">
+            <div className="py-[3px] rounded-[5px] transition-all text-[13px] md:text-[14px] font-[500] truncate">
               {getDisplayText()}
             </div>
           </div>
           <div
             onClick={next}
-            className="cursor-pointer text-textColor rtl:rotate-180 px-[9px] bg-newBgColorInner h-full flex items-center justify-center hover:text-textItemFocused hover:bg-boxFocused"
+            className="cursor-pointer text-textColor rtl:rotate-180 px-[12px] bg-newBgColorInner h-full flex items-center justify-center hover:text-textItemFocused hover:bg-boxFocused transition-colors shrink-0"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -274,26 +274,24 @@ export const Filters = () => {
             </svg>
           </div>
         </div>
-        <div className="flex-1 text-[14px] font-[500]">
-          <div className="text-center flex h-[42px]">
-            <div
-              onClick={setToday}
-              className="hover:text-textItemFocused hover:bg-boxFocused py-[3px] px-[9px] flex justify-center items-center rounded-[8px] transition-all cursor-pointer text-[14px] bg-newBgColorInner border border-newTableBorder"
-            >
-              {t('today', 'Today')}
-            </div>
-          </div>
+        <div
+          onClick={setToday}
+          className="hover:text-textItemFocused hover:bg-boxFocused h-[42px] px-[16px] flex justify-center items-center rounded-[8px] transition-all cursor-pointer text-[13px] md:text-[14px] font-[500] bg-newBgColorInner border border-newTableBorder shrink-0"
+        >
+          {t('today', 'Today')}
         </div>
       </div>
-      <SelectCustomer
-        customer={calendar.customer as string}
-        onChange={(customer: string) => setCustomer(customer)}
-        integrations={calendar.integrations}
-      />
-      <div className="flex flex-row p-[4px] border border-newTableBorder rounded-[8px] text-[14px] font-[500]">
+      <div className="flex flex-row gap-[8px] items-center w-full xl:w-auto">
+        <SelectCustomer
+          customer={calendar.customer as string}
+          onChange={(customer: string) => setCustomer(customer)}
+          integrations={calendar.integrations}
+        />
+      </div>
+      <div className="flex flex-row p-[4px] border border-newTableBorder rounded-[8px] text-[13px] md:text-[14px] font-[500] shrink-0 bg-newBgColorInner justify-center md:justify-start">
         <div
           className={clsx(
-            'pt-[6px] pb-[5px] cursor-pointer w-[74px] text-center rounded-[6px]',
+            'pt-[6px] pb-[5px] cursor-pointer px-[8px] md:w-[74px] text-center rounded-[6px] transition-colors',
             calendar.display === 'day' && 'text-textItemFocused bg-boxFocused'
           )}
           onClick={setDay}
@@ -302,7 +300,7 @@ export const Filters = () => {
         </div>
         <div
           className={clsx(
-            'pt-[6px] pb-[5px] cursor-pointer w-[74px] text-center rounded-[6px]',
+            'pt-[6px] pb-[5px] cursor-pointer px-[8px] md:w-[74px] text-center rounded-[6px] transition-colors',
             calendar.display === 'week' && 'text-textItemFocused bg-boxFocused'
           )}
           onClick={setWeek}
@@ -311,7 +309,7 @@ export const Filters = () => {
         </div>
         <div
           className={clsx(
-            'pt-[6px] pb-[5px] cursor-pointer w-[74px] text-center rounded-[6px]',
+            'pt-[6px] pb-[5px] cursor-pointer px-[8px] md:w-[74px] text-center rounded-[6px] transition-colors',
             calendar.display === 'month' && 'text-textItemFocused bg-boxFocused'
           )}
           onClick={setMonth}
diff --git a/apps/frontend/src/components/launches/helpers/date.picker.tsx b/apps/frontend/src/components/launches/helpers/date.picker.tsx
index 585f8e91b..b23e0e9ab 100644
--- a/apps/frontend/src/components/launches/helpers/date.picker.tsx
+++ b/apps/frontend/src/components/launches/helpers/date.picker.tsx
@@ -35,20 +35,20 @@ export const DatePicker: FC<{
   );
   return (
     <div
-      className="px-[16px] border border-newTextColor/10 rounded-[8px] justify-center flex gap-[8px] items-center relative h-[44px] text-[15px] font-[600] ml-[7px] select-none flex-1"
+      className="px-[16px] border border-newTextColor/10 rounded-[8px] justify-center flex gap-[8px] items-center relative h-[44px] text-[13px] md:text-[15px] font-[600] ml-[7px] md:ml-[0] select-none flex-1 w-full min-w-0 max-w-full"
       onClick={changeShow}
       ref={ref}
     >
-      <div className="cursor-pointer">
+      <div className="cursor-pointer flex-shrink-0">
         <CalendarIcon />
       </div>
-      <div className="cursor-pointer">
+      <div className="cursor-pointer truncate">
         {date.format(isUSCitizen() ? 'MM/DD/YYYY hh:mm A' : 'DD/MM/YYYY HH:mm')}
       </div>
       {open && (
         <div
           onClick={(e) => e.stopPropagation()}
-          className="animate-fadeIn absolute bottom-[100%] mb-[16px] start-[50%] -translate-x-[50%] bg-sixth border border-tableBorder text-textColor rounded-[16px] z-[300] p-[16px] flex flex-col"
+          className="animate-fadeIn absolute bottom-[100%] md:bottom-auto md:top-[100%] mb-[16px] md:mt-[16px] start-[50%] md:start-auto md:end-0 md:translate-x-0 -translate-x-[50%] bg-sixth border border-tableBorder text-textColor rounded-[16px] z-[300] p-[16px] flex flex-col max-w-[90vw] md:max-w-[400px] w-[calc(100vw-32px)] md:w-auto"
         >
           <Calendar
             onChange={changeDate('date')}
@@ -66,22 +66,22 @@ export const DatePicker: FC<{
               return '!text-textColor';
             }}
             classNames={{
-              day: 'hover:bg-seventh',
+              day: 'hover:bg-seventh text-[12px] md:text-[14px]',
               calendarHeaderControl: 'text-textColor hover:bg-third',
-              calendarHeaderLevel: 'text-textColor hover:bg-third', // cell: 'child:!text-textColor'
+              calendarHeaderLevel: 'text-textColor hover:bg-third',
             }}
           />
           <TimeInput
             onChange={changeDate('time')}
             label="Pick time"
             classNames={{
-              label: 'text-textColor py-[12px]',
+              label: 'text-textColor py-[12px] text-[12px] md:text-[14px]',
               input:
-                'bg-sixth h-[40px] border border-tableBorder text-textColor rounded-[4px] outline-none',
+                'bg-sixth h-[40px] border border-tableBorder text-textColor rounded-[4px] outline-none text-[12px] md:text-[14px]',
             }}
             defaultValue={date.toDate()}
           />
-          <Button className="mt-[12px]" onClick={changeShow}>
+          <Button className="mt-[12px] w-full text-[12px] md:text-[14px]" onClick={changeShow}>
             {t('close', 'Close')}
           </Button>
         </div>
diff --git a/apps/frontend/src/components/launches/helpers/top.title.component.tsx b/apps/frontend/src/components/launches/helpers/top.title.component.tsx
index 48624e60f..55bf32447 100644
--- a/apps/frontend/src/components/launches/helpers/top.title.component.tsx
+++ b/apps/frontend/src/components/launches/helpers/top.title.component.tsx
@@ -31,11 +31,11 @@ export const TopTitle: FC<{
   return (
     <div
       className={clsx(
-        'border-b flex items-center border-newBgLineColor -mx-[24px]',
+        'border-b flex items-center border-newBgLineColor -mx-[16px] md:-mx-[24px]',
         props.extraClass ? props.extraClass : 'h-[57px]'
       )}
     >
-      <div className="px-[24px] flex flex-1 items-center">
+      <div className="px-[16px] md:px-[24px] flex flex-1 items-center">
         {!removeTitle && (
           <div className={clsx('flex-1', props.titleSize)}>
             {translatedTitle}
diff --git a/apps/frontend/src/components/launches/information.component.tsx b/apps/frontend/src/components/launches/information.component.tsx
index b65acfa72..8dad34486 100644
--- a/apps/frontend/src/components/launches/information.component.tsx
+++ b/apps/frontend/src/components/launches/information.component.tsx
@@ -142,15 +142,16 @@ export const InformationComponent: FC<{
       {((isGlobal && selectedIntegrations.length) || !isValid) && (
         <div
           className={clsx(
-            'z-[300] hidden rounded-[12px] bg-newBgColorInner group-hover:flex absolute end-0 bottom-[100%] mb-[5px] p-[12px] flex-col',
+            'z-[300] hidden rounded-[12px] bg-newBgColorInner group-hover:flex absolute end-0 bottom-[calc(100%+8px)] p-[12px] flex-col shadow-2xl min-w-[200px] max-w-[280px] md:max-w-[320px]',
             isValid ? 'border border-newColColor' : 'border border-[#FF3F3F]'
           )}
         >
+          <div className="absolute -bottom-1.5 end-3 w-3 h-3 bg-newBgColorInner rotate-45 border-b border-e border-inherit" />
           {!isPicture && !totalChars && (
             <div
               className={clsx(
-                'text-sm text-[#FF3F3F] whitespace-nowrap',
-                isGlobal && selectedIntegrations.length && 'mb-[12px]'
+                'text-[13px] text-[#FF3F3F] font-medium leading-tight',
+                isGlobal && selectedIntegrations.length && 'mb-[10px]'
               )}
             >
               {t('your_post_should_have_at_least_one_character_or_one_image', 'Your post should have at least one character or one image.')}
@@ -175,8 +176,8 @@ export const InformationComponent: FC<{
                       isInternal?.[index]
                         ? ''
                         : totalChars > (chars?.[p.integration.id] || 0)
-                        ? 'text-[#FF3F3F]'
-                        : ''
+                          ? 'text-[#FF3F3F]'
+                          : ''
                     )}
                   >
                     {p.integration.name} (
@@ -188,8 +189,8 @@ export const InformationComponent: FC<{
                       isInternal?.[index]
                         ? ''
                         : totalChars > (chars?.[p.integration.id] || 0)
-                        ? 'text-[#FF3F3F]'
-                        : ''
+                          ? 'text-[#FF3F3F]'
+                          : ''
                     )}
                   >
                     {isInternal?.[index]
diff --git a/apps/frontend/src/components/launches/launches.component.tsx b/apps/frontend/src/components/launches/launches.component.tsx
index 9d07acd3b..dac3befed 100644
--- a/apps/frontend/src/components/launches/launches.component.tsx
+++ b/apps/frontend/src/components/launches/launches.component.tsx
@@ -160,7 +160,7 @@ export const MenuGroupComponent: FC<
   }));
   return (
     <div
-      className="gap-[16px] flex flex-col relative"
+      className="gap-[12px] md:gap-[16px] flex lg:flex-col flex-row relative"
       // @ts-ignore
       ref={drop}
     >
@@ -183,9 +183,9 @@ export const MenuGroupComponent: FC<
             className="line-clamp-1"
             {...(collapsed
               ? {
-                  'data-tooltip-id': 'tooltip',
-                  'data-tooltip-content': group.name,
-                }
+                'data-tooltip-id': 'tooltip',
+                'data-tooltip-content': group.name,
+              }
               : {})}
           >
             {group.name}
@@ -194,7 +194,7 @@ export const MenuGroupComponent: FC<
       )}
       <div
         className={clsx(
-          'gap-[12px] flex flex-col relative',
+          'gap-[10px] md:gap-[12px] flex lg:flex-col flex-row relative',
           !isOpen && 'hidden'
         )}
       >
@@ -252,13 +252,13 @@ export const MenuComponent: FC<
       })}
       {...(collapsed
         ? {
-            'data-tooltip-id': 'tooltip',
-            'data-tooltip-content': integration.name,
-          }
+          'data-tooltip-id': 'tooltip',
+          'data-tooltip-content': integration.name,
+        }
         : {})}
       key={integration.id}
       className={clsx(
-        'flex gap-[12px] items-center bg-newBgColorInner hover:bg-boxHover group/profile transition-all rounded-e-[8px]',
+        'flex gap-[10px] md:gap-[12px] items-center bg-newBgColorInner hover:bg-boxHover group/profile transition-all rounded-[8px] lg:rounded-s-none lg:rounded-e-[8px] shrink-0 min-w-fit pr-4 md:pr-4 ps-2 md:ps-0',
         integration.refreshNeeded && 'cursor-pointer'
       )}
     >
@@ -268,7 +268,7 @@ export const MenuComponent: FC<
           integration.disabled && 'opacity-50'
         )}
       >
-        <div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity">
+        <div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity hidden lg:block">
           <SVGLine />
         </div>
         {(integration.inBetweenSteps || integration.refreshNeeded) && (
@@ -314,12 +314,12 @@ export const MenuComponent: FC<
         // @ts-ignore
         ref={drag}
         {...(integration.disabled &&
-        totalNonDisabledChannels === user?.totalChannels
+          totalNonDisabledChannels === user?.totalChannels
           ? {
-              'data-tooltip-id': 'tooltip',
-              'data-tooltip-content':
-                t('channel_disabled_upgrade_plan', 'This channel is disabled, please upgrade your plan to enable it.'),
-            }
+            'data-tooltip-id': 'tooltip',
+            'data-tooltip-content':
+              t('channel_disabled_upgrade_plan', 'This channel is disabled, please upgrade your plan to enable it.'),
+          }
           : {})}
         role="Handle"
         className={clsx(
@@ -435,10 +435,10 @@ export const LaunchesComponent = () => {
   );
   const refreshChannel = useCallback(
     (
-        integration: Integration & {
-          identifier: string;
-        }
-      ) =>
+      integration: Integration & {
+        identifier: string;
+      }
+    ) =>
       async () => {
         const { url } = await (
           await fetch(
@@ -482,7 +482,7 @@ export const LaunchesComponent = () => {
   }, []);
   if (isLoading || reload) {
     return (
-      <div className="bg-newBgColorInner p-[20px] flex flex-1 flex-col gap-[15px] transition-all items-center justify-center">
+      <div className="bg-newBgColorInner p-[12px] md:p-[20px] flex flex-1 flex-col gap-[12px] md:gap-[15px] transition-all items-center justify-center">
         <LoadingComponent />
       </div>
     );
@@ -495,101 +495,103 @@ export const LaunchesComponent = () => {
       <CalendarWeekProvider integrations={sortedIntegrations}>
         <div
           className={clsx(
-            'flex relative flex-col',
-            collapseMenu === '1' ? 'group sidebar w-[100px]' : 'w-[260px]'
+            'flex relative lg:flex-col lg:shrink-0',
+            collapseMenu === '1' ? 'group sidebar w-full lg:w-[100px]' : 'w-full lg:w-[260px]'
           )}
         >
           <div
             className={clsx(
-              'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all absolute start-0 top-0 w-full h-full overflow-x-hidden overflow-y-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor'
+              'bg-newBgColorInner transition-all lg:absolute start-0 top-0 w-full h-fit lg:h-full overflow-x-auto lg:overflow-x-hidden lg:overflow-y-auto scrollbar-hide lg:scrollbar lg:scrollbar-thumb-fifth lg:scrollbar-track-newBgColor shadow-sm lg:shadow-none'
             )}
           >
-            <div className="flex items-center">
-              <h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500]">
-                {t('channels')}
-              </h2>
-              <div
-                onClick={() =>
-                  setCollapseMenu(collapseMenu === '1' ? '0' : '1')
-                }
-                className="group-[.sidebar]:rotate-[180deg] group-[.sidebar]:mx-auto text-btnText bg-btnSimple rounded-[6px] w-[24px] h-[24px] flex items-center justify-center cursor-pointer select-none"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="7"
-                  height="13"
-                  viewBox="0 0 7 13"
-                  fill="none"
+            <div className="flex lg:flex-col flex-row gap-[16px] md:gap-[15px] items-center lg:items-stretch p-[16px] lg:p-[20px] w-full lg:min-h-full">
+              <div className="flex items-center">
+                <h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500]">
+                  {t('channels')}
+                </h2>
+                <div
+                  onClick={() =>
+                    setCollapseMenu(collapseMenu === '1' ? '0' : '1')
+                  }
+                  className="group-[.sidebar]:rotate-[180deg] group-[.sidebar]:mx-auto text-btnText bg-btnSimple rounded-[6px] w-[24px] h-[24px] flex items-center justify-center cursor-pointer select-none"
                 >
-                  <path
-                    d="M6 11.5L1 6.5L6 1.5"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="7"
+                    height="13"
+                    viewBox="0 0 7 13"
+                    fill="none"
+                  >
+                    <path
+                      d="M6 11.5L1 6.5L6 1.5"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
               </div>
-            </div>
-            <div className="flex flex-col gap-[8px] group-[.sidebar]:mx-auto group-[.sidebar]:w-[44px]">
-              <AddProviderButton update={() => update(true)} />
-              <div className="flex gap-[8px] group-[.sidebar]:flex-col">
-                {sortedIntegrations?.length > 0 && <NewPost />}
-                {sortedIntegrations?.length > 0 &&
-                  user?.tier?.ai &&
-                  billingEnabled && <GeneratorComponent />}
+              <div className="flex lg:flex-col flex-row gap-[10px] md:gap-[8px] group-[.sidebar]:mx-auto group-[.sidebar]:w-[44px] shrink-0">
+                <div className="flex gap-[8px] group-[.sidebar]:flex-col">
+                  {sortedIntegrations?.length > 0 && <NewPost />}
+                  {sortedIntegrations?.length > 0 &&
+                    user?.tier?.ai &&
+                    billingEnabled && <GeneratorComponent />}
+                </div>
+                <AddProviderButton update={() => update(true)} />
               </div>
-            </div>
-            <div className="gap-[32px] flex flex-col select-none flex-1">
-              {sortedIntegrations.length === 0 && collapseMenu === '0' && (
-                <div className="flex-1 max-h-[500px] justify-center items-center flex">
-                  <div className="flex flex-col gap-[12px] text-center">
-                    <img
-                      src={
-                        mode === 'dark'
-                          ? '/no-channels.svg'
-                          : '/no-channels-colors.svg'
-                      }
-                      alt="No channels"
-                      className="mx-auto min-w-[100%]"
-                    />
-                    <div className="font-[600] text-[20px]">
-                      {t('no_channels', 'No channels yet')}
-                    </div>
-                    <div className="text-[14px]">
-                      {t('connect_your_accounts')}
+              <div className="gap-[32px] flex flex-col select-none flex-1">
+                {sortedIntegrations.length === 0 && collapseMenu === '0' && (
+                  <div className="hidden lg:flex flex-1 max-h-[500px] justify-center items-center">
+                    <div className="flex flex-col gap-[12px] text-center">
+                      <img
+                        src={
+                          mode === 'dark'
+                            ? '/no-channels.svg'
+                            : '/no-channels-colors.svg'
+                        }
+                        alt="No channels"
+                        className="mx-auto max-w-[200px] w-full h-auto"
+                      />
+                      <div className="font-[600] text-[20px]">
+                        {t('no_channels', 'No channels yet')}
+                      </div>
+                      <div className="text-[14px]">
+                        {t('connect_your_accounts')}
+                      </div>
                     </div>
                   </div>
-                </div>
-              )}
-              {menuIntegrations.map((menu) => (
-                <MenuGroupComponent
-                  collapsed={collapseMenu === '1'}
-                  changeItemGroup={changeItemGroup}
-                  key={menu.name}
-                  group={menu}
-                  mutate={mutate}
-                  continueIntegration={continueIntegration}
-                  update={update}
-                  refreshChannel={refreshChannel}
-                  totalNonDisabledChannels={totalNonDisabledChannels}
-                />
-              ))}
-            </div>
-            <div className="mt-[5px] text-center">
-              {process.env.NEXT_PUBLIC_VERSION
-                ? process.env.NEXT_PUBLIC_VERSION
-                : ''}
+                )}
+                {menuIntegrations.map((menu) => (
+                  <MenuGroupComponent
+                    collapsed={collapseMenu === '1'}
+                    changeItemGroup={changeItemGroup}
+                    key={menu.name}
+                    group={menu}
+                    mutate={mutate}
+                    continueIntegration={continueIntegration}
+                    update={update}
+                    refreshChannel={refreshChannel}
+                    totalNonDisabledChannels={totalNonDisabledChannels}
+                  />
+                ))}
+              </div>
+              <div className="mt-[5px] text-center">
+                {process.env.NEXT_PUBLIC_VERSION
+                  ? process.env.NEXT_PUBLIC_VERSION
+                  : ''}
+              </div>
             </div>
           </div>
         </div>
-        <div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
+        <div className="bg-newBgColorInner flex-1 flex-col flex p-[16px] md:p-[20px] gap-[16px] md:gap-[20px] min-w-0 overflow-hidden shadow-sm">
           <Filters />
-          <div className="flex-1 flex">
+          <div className="flex-1 flex min-h-0">
             <Calendar />
           </div>
         </div>
       </CalendarWeekProvider>
-    </DNDProvider>
+    </DNDProvider >
   );
 };
diff --git a/apps/frontend/src/components/launches/select.customer.tsx b/apps/frontend/src/components/launches/select.customer.tsx
index 2b42acc3f..604a326a5 100644
--- a/apps/frontend/src/components/launches/select.customer.tsx
+++ b/apps/frontend/src/components/launches/select.customer.tsx
@@ -58,12 +58,15 @@ export const SelectCustomer: FC<{
         data-tooltip-content={t('select_customer_tooltip', 'Select Customer')}
         onClick={openClose}
         className={clsx(
-          'relative z-[20] cursor-pointer h-[42px] rounded-[8px] pl-[16px] pr-[12px] gap-[8px] border flex items-center',
+          'relative z-[20] cursor-pointer h-[42px] rounded-[8px] pl-[16px] pr-[12px] gap-[8px] border flex items-center min-w-0 md:min-w-[120px] flex-1 md:flex-none justify-between',
           open ? 'border-[#612BD3]' : 'border-newColColor'
         )}
       >
-        <div>
+        <div className="flex items-center gap-[8px] truncate">
           <UserIcon />
+          <div className="text-[14px] font-[500] truncate">
+            {uniqBy(integrations, (i) => i?.customer?.id).find((f) => f.customer?.id === customer)?.customer?.name || t('select_customer', 'Select Customer')}
+          </div>
         </div>
         <div>
           <DropdownArrowIcon rotated={open} />
@@ -72,7 +75,7 @@ export const SelectCustomer: FC<{
       {open && (
         <div
           style={pos}
-          className="flex flex-col fixed pt-[12px] bg-newBgColorInner menu-shadow min-w-[250px]"
+          className="flex flex-col fixed pt-[12px] bg-newBgColorInner menu-shadow min-w-[200px] max-w-[calc(100vw-32px)]"
         >
           <div className="text-[14px] font-[600] px-[12px] mb-[5px]">
             {t('customers', 'Customers')}
@@ -92,7 +95,7 @@ export const SelectCustomer: FC<{
                   setCurrent('global')
                 }}
                 key={p.customer?.id}
-                className="p-[12px] hover:bg-newBgColor text-[14px] font-[500] h-[32px] flex items-center"
+                className="p-[12px] hover:bg-newBgColor text-[14px] font-[500] flex items-center cursor-pointer"
               >
                 {p.customer?.name}
               </div>
diff --git a/apps/frontend/src/components/layout/new-modal.tsx b/apps/frontend/src/components/layout/new-modal.tsx
index 651e3e77f..fb1d67aed 100644
--- a/apps/frontend/src/components/layout/new-modal.tsx
+++ b/apps/frontend/src/components/layout/new-modal.tsx
@@ -182,7 +182,7 @@ export const Component: FC<{
                 : {}
             }
             className={clsx(
-              'absolute min-w-full',
+              'absolute min-w-full px-[16px] md:px-0',
               !modal.fullScreen
                 ? modal.top
                   ? ''
@@ -195,9 +195,9 @@ export const Component: FC<{
           >
             <div
               className={clsx(
-                !modal.removeLayout && 'gap-[40px] p-[32px]',
-                'bg-newBgColorInner mx-auto flex flex-col w-fit rounded-[24px] relative',
-                modal.size ? '' : 'min-w-[600px]',
+                !modal.removeLayout && 'gap-[20px] p-[20px] md:gap-[40px] md:p-[32px]',
+                'bg-newBgColorInner mx-auto flex flex-col w-full md:w-fit rounded-[24px] relative overflow-hidden',
+                modal.size ? '' : 'w-full md:min-w-[600px] max-w-full',
                 modal.fullScreen && 'h-full'
               )}
               {...((!!modal.size || !!modal.height) && {
@@ -213,7 +213,7 @@ export const Component: FC<{
                   {modal.title}
                 </div>
                 {typeof modal.withCloseButton === 'undefined' ||
-                modal.withCloseButton ? (
+                  modal.withCloseButton ? (
                   <div className="cursor-pointer">
                     <button
                       className="outline-none absolute end-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
diff --git a/apps/frontend/src/components/layout/settings.component.tsx b/apps/frontend/src/components/layout/settings.component.tsx
index fc1f6a287..1caa836f1 100644
--- a/apps/frontend/src/components/layout/settings.component.tsx
+++ b/apps/frontend/src/components/layout/settings.component.tsx
@@ -114,21 +114,21 @@ export const SettingsPopup: FC<{
   }, []);
 
   return (
-    <>
-      <div className="bg-newBgColorInner p-[20px] flex flex-col transition-all w-[260px]">
-        <div className="flex flex-1 flex-col gap-[15px]">
+    <div className="flex flex-col md:flex-row w-full h-full overflow-hidden">
+      <div className="bg-newBgColorInner flex md:flex-col flex-row transition-all w-full md:w-[260px] overflow-x-auto md:overflow-x-visible items-center md:items-stretch scrollbar-hide shrink-0">
+        <div className="flex flex-row md:flex-col gap-[10px] md:gap-[15px] flex-1 p-[16px] md:p-[20px]">
           {list.map(({ tab: tabKey, label }) => (
             <div
               key={tabKey}
               className={clsx(
-                'cursor-pointer flex items-center gap-[12px] group/profile hover:bg-boxHover rounded-e-[8px]',
+                'cursor-pointer flex items-center gap-[8px] md:gap-[12px] group/profile hover:bg-boxHover rounded-[8px] md:rounded-e-[8px] whitespace-nowrap px-3 md:px-0 py-2 md:py-0 bg-sixth md:bg-transparent',
                 tabKey === tab && 'bg-boxHover'
               )}
               onClick={() => setTab(tabKey)}
             >
               <div
                 className={clsx(
-                  'h-full w-[4px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity',
+                  'h-full w-[4px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity hidden md:block',
                   tabKey === tab && 'opacity-100'
                 )}
               >
@@ -140,15 +140,15 @@ export const SettingsPopup: FC<{
         </div>
         <div>
           {showLogout && (
-            <div className="mt-4">
+            <div className="md:mt-4 ml-2 md:ml-0">
               <LogoutComponent />
             </div>
           )}
         </div>
       </div>
-      <div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
+      <div className="bg-newBgColorInner flex-1 flex-col flex p-[16px] md:p-[20px] gap-[8px] md:gap-[12px] overflow-y-auto w-full md:w-auto">
         <FormProvider {...form}>
-          <form onSubmit={form.handleSubmit(submit)}>
+          <form onSubmit={form.handleSubmit(submit)} className="w-full">
             {!!getRef && (
               <button type="submit" className="hidden" ref={getRef}></button>
             )}
@@ -205,7 +205,7 @@ export const SettingsPopup: FC<{
           </form>
         </FormProvider>
       </div>
-    </>
+    </div>
   );
 };
 export const SettingsComponent = () => {
diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx
index 97a10637e..c1604458a 100644
--- a/apps/frontend/src/components/media/media.component.tsx
+++ b/apps/frontend/src/components/media/media.component.tsx
@@ -464,13 +464,13 @@ export const MediaBox: FC<{
             {!isLoading && !data?.results?.length && (
               <>
                 <NoMediaIcon />
-                <div className="text-[20px] font-[600]">
+                <div className="text-[16px] md:text-[20px] font-[600]">
                   {t(
                     'you_dont_have_any_media_yet',
                     "You don't have any media yet"
                   )}
                 </div>
-                <div className="whitespace-pre-line text-newTextColor/[0.6] text-center">
+                <div className="whitespace-pre-line text-newTextColor/[0.6] text-center text-[12px] md:text-[14px]">
                   {t(
                     'select_or_upload_pictures_max_1gb',
                     'Select or upload pictures (maximum 1 GB per upload).'
diff --git a/apps/frontend/src/components/new-launch/manage.modal.tsx b/apps/frontend/src/components/new-launch/manage.modal.tsx
index 8d1f9708e..491a2660e 100644
--- a/apps/frontend/src/components/new-launch/manage.modal.tsx
+++ b/apps/frontend/src/components/new-launch/manage.modal.tsx
@@ -219,14 +219,13 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
 
         for (const item of notEnoughChars) {
           toaster.show(
-            `${capitalize(item.integration.identifier.split('-')[0])} (${
-              item.integration.name
+            `${capitalize(item.integration.identifier.split('-')[0])} (${item.integration.name
             }):` +
-              ' ' +
-              t(
-                'post_needs_content_or_image',
-                'Your post should have at least one character or one image.'
-              ),
+            ' ' +
+            t(
+              'post_needs_content_or_image',
+              'Your post should have at least one character or one image.'
+            ),
             'warning'
           );
           setLoading(false);
@@ -237,8 +236,7 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
         for (const item of checkAllValid) {
           if (item.valid === false) {
             toaster.show(
-              `${capitalize(item.integration.identifier.split('-')[0])} (${
-                item.integration.name
+              `${capitalize(item.integration.identifier.split('-')[0])} (${item.integration.name
               }): ${t('please_fix_your_settings', 'Please fix your settings')}`,
               'warning'
             );
@@ -250,8 +248,7 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
 
           if (item.errors !== true) {
             toaster.show(
-              `${capitalize(item.integration.identifier.split('-')[0])} (${
-                item.integration.name
+              `${capitalize(item.integration.identifier.split('-')[0])} (${item.integration.name
               }): ${item.errors}`,
               'warning'
             );
@@ -374,9 +371,9 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
         addEditSets
           ? addEditSets(data)
           : await fetch('/posts', {
-              method: 'POST',
-              body: JSON.stringify(data),
-            });
+            method: 'POST',
+            body: JSON.stringify(data),
+          });
 
         if (!addEditSets) {
           mutate();
@@ -401,14 +398,17 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
   );
 
   return (
-    <div className="w-full h-full flex-1 p-[40px] flex relative">
-      <div className="flex flex-1 bg-newBgColorInner rounded-[20px] flex-col">
-        <div className="flex-1 flex">
-          <div className="flex flex-col flex-1 border-e border-newBorder">
-            <div className="bg-newBgColor h-[65px] rounded-s-[20px] !rounded-b-[0] flex items-center px-[20px] text-[20px] font-[600]">
-              {t('create_post_title', 'Create Post')}
+    <div className="w-full h-full flex-1 p-0 md:p-[20px] lg:p-[40px] flex relative overflow-hidden">
+      <div className="flex flex-1 bg-newBgColorInner md:rounded-[20px] flex-col overflow-hidden">
+        <div className="flex-1 flex flex-col md:flex-row overflow-hidden">
+          <div className="flex flex-col flex-1 border-e border-newBorder overflow-hidden">
+            <div className="bg-newBgColor h-[60px] md:h-[65px] md:rounded-s-[20px] flex items-center px-[20px] text-[18px] md:text-[20px] font-[600] shrink-0">
+              <div className="flex-1">{t('create_post_title', 'Create Post')}</div>
+              <div className="md:hidden cursor-pointer">
+                <CloseIcon onClick={askClose} className="text-[#A3A3A3]" />
+              </div>
             </div>
-            <div className="flex-1 flex flex-col gap-[16px]">
+            <div className="flex-1 flex flex-col gap-[16px] overflow-hidden">
               <div
                 className={clsx('flex-1 relative', showSettings && 'hidden')}
               >
@@ -489,10 +489,10 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
               </div>
             </div>
           </div>
-          <div className="w-[580px] flex flex-col">
-            <div className="bg-newBgColor h-[65px] rounded-e-[20px] !rounded-b-[0] flex items-center px-[20px] text-[20px] font-[600]">
+          <div className="w-full md:w-[580px] flex flex-col border-t md:border-t-0 md:border-s border-newBorder overflow-hidden">
+            <div className="bg-newBgColor h-[60px] md:h-[65px] md:rounded-e-[20px] flex items-center px-[20px] text-[18px] md:text-[20px] font-[600] shrink-0">
               <div className="flex-1">{t('post_preview', 'Post Preview')}</div>
-              <div className="cursor-pointer">
+              <div className="hidden md:block cursor-pointer">
                 <CloseIcon onClick={askClose} className="text-[#A3A3A3]" />
               </div>
             </div>
@@ -506,8 +506,8 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
             </div>
           </div>
         </div>
-        <div className="select-none h-[84px] py-[20px] border-t border-newBorder flex items-center">
-          <div className="flex-1 flex ps-[20px] gap-[8px]">
+        <div className="select-none py-[15px] md:py-[20px] border-t border-newBorder flex flex-col md:flex-row items-stretch md:items-center gap-[12px] px-[20px]">
+          <div className="flex-1 flex flex-wrap gap-[8px]">
             {!dummy && (
               <TagsComponent
                 name="tags"
@@ -523,7 +523,7 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
               <RepeatComponent repeat={repeater} onChange={setRepeater} />
             )}
           </div>
-          <div className="pe-[20px] flex items-center justify-end gap-[8px]">
+          <div className="flex items-center justify-end gap-[8px] flex-wrap">
             {existingData?.integration && (
               <button
                 onClick={deletePost}
@@ -588,12 +588,12 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
                     {selectedIntegrations.length === 0
                       ? t('check_circles_above', 'Check the circles above')
                       : dummy
-                      ? t('create_output', 'Create output')
-                      : !existingData?.integration
-                      ? t('add_to_calendar', 'Add to calendar')
-                      : existingData?.posts?.[0]?.state === 'DRAFT'
-                      ? t('schedule', 'Schedule')
-                      : t('update', 'Update')}
+                        ? t('create_output', 'Create output')
+                        : !existingData?.integration
+                          ? t('add_to_calendar', 'Add to calendar')
+                          : existingData?.posts?.[0]?.state === 'DRAFT'
+                            ? t('schedule', 'Schedule')
+                            : t('update', 'Update')}
                   </div>
                   {!dummy && (
                     <div className="flex justify-center items-center h-[20px] w-[20px] pt-[4px] arrow-change">
diff --git a/apps/frontend/src/components/new-launch/select.current.tsx b/apps/frontend/src/components/new-launch/select.current.tsx
index 07fda8779..d2bc94107 100644
--- a/apps/frontend/src/components/new-launch/select.current.tsx
+++ b/apps/frontend/src/components/new-launch/select.current.tsx
@@ -59,75 +59,77 @@ export const SelectCurrent: FC = () => {
 
   return (
     <>
-      <div className="select-none left-0 absolute w-full z-[100] px-[20px]">
+      <div className="select-none left-0 absolute w-full z-[100]">
         <div
           ref={contentRef}
           className={clsx(
-            'flex gap-[6px] w-full overflow-x-auto scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary',
+            'flex w-full overflow-x-auto scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary',
             locked && 'opacity-50 pointer-events-none'
           )}
         >
-          <div
-            onClick={() => {
-              setHide(true);
-              setCurrent('global');
-            }}
-            className={clsx(
-              'cursor-pointer flex gap-[8px] rounded-[8px] w-[40px] h-[40px] justify-center items-center bg-newBgLineColor',
-              current !== 'global'
-                ? 'text-[#A3A3A3]'
-                : 'border border-[#FC69FF] text-[#FC69FF]'
-            )}
-          >
-            <div>
-              <GlobalIcon />
-            </div>
-          </div>
-          {selectedIntegrations.map(({ integration }) => (
+          <div className="flex gap-[6px] px-[20px] py-[2px]">
             <div
               onClick={() => {
                 setHide(true);
-                setCurrent(integration.id);
+                setCurrent('global');
               }}
-              key={integration.id}
               className={clsx(
-                'border cursor-pointer relative flex gap-[8px] w-[40px] h-[40px] rounded-[8px] items-center bg-newBgLineColor justify-center',
-                current === integration.id
-                  ? 'border-[#FC69FF] text-[#FC69FF]'
-                  : 'border-transparent'
+                'cursor-pointer flex gap-[8px] rounded-[8px] w-[40px] h-[40px] justify-center items-center bg-newBgLineColor',
+                current !== 'global'
+                  ? 'text-[#A3A3A3]'
+                  : 'border border-[#FC69FF] text-[#FC69FF]'
               )}
             >
-              <IsGlobal id={integration.id} />
+              <div>
+                <GlobalIcon />
+              </div>
+            </div>
+            {selectedIntegrations.map(({ integration }) => (
               <div
+                onClick={() => {
+                  setHide(true);
+                  setCurrent(integration.id);
+                }}
+                key={integration.id}
                 className={clsx(
-                  'relative w-full h-full rounded-full flex justify-center items-center filter transition-all duration-500'
+                  'border cursor-pointer relative flex gap-[8px] w-[40px] h-[40px] rounded-[8px] items-center bg-newBgLineColor justify-center',
+                  current === integration.id
+                    ? 'border-[#FC69FF] text-[#FC69FF]'
+                    : 'border-transparent'
                 )}
               >
-                <Image
-                  src={integration.picture || '/no-picture.jpg'}
-                  className="rounded-full min-w-[26px]"
-                  alt={integration.identifier}
-                  width={26}
-                  height={26}
-                />
-                {integration.identifier === 'youtube' ? (
-                  <img
-                    src="/icons/platforms/youtube.svg"
-                    className="absolute z-10 bottom-[2px] end-[2px] min-w-[12px]"
-                    width={12}
-                  />
-                ) : (
+                <IsGlobal id={integration.id} />
+                <div
+                  className={clsx(
+                    'relative w-full h-full rounded-full flex justify-center items-center filter transition-all duration-500'
+                  )}
+                >
                   <Image
-                    src={`/icons/platforms/${integration.identifier}.png`}
-                    className="min-w-[12px] min-h-[12px] rounded-[3px] absolute z-10 bottom-[6px] end-[6px]"
+                    src={integration.picture || '/no-picture.jpg'}
+                    className="rounded-full min-w-[26px]"
                     alt={integration.identifier}
-                    width={12}
-                    height={12}
+                    width={26}
+                    height={26}
                   />
-                )}
+                  {integration.identifier === 'youtube' ? (
+                    <img
+                      src="/icons/platforms/youtube.svg"
+                      className="absolute z-10 bottom-[2px] end-[2px] min-w-[12px]"
+                      width={12}
+                    />
+                  ) : (
+                    <Image
+                      src={`/icons/platforms/${integration.identifier}.png`}
+                      className="min-w-[12px] min-h-[12px] rounded-[3px] absolute z-10 bottom-[6px] end-[6px]"
+                      alt={integration.identifier}
+                      width={12}
+                      height={12}
+                    />
+                  )}
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
       <div className={clsx(hasScroll ? 'h-[55px]' : 'h-[40px]')} />
diff --git a/apps/frontend/src/components/new-layout/layout.component.tsx b/apps/frontend/src/components/new-layout/layout.component.tsx
index 2d0d070ef..19a91f125 100644
--- a/apps/frontend/src/components/new-layout/layout.component.tsx
+++ b/apps/frontend/src/components/new-layout/layout.component.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { ReactNode, useCallback } from 'react';
+import React, { ReactNode, useCallback, useState } from 'react';
 import { Logo } from '@gitroom/frontend/components/new-layout/logo';
 import { Plus_Jakarta_Sans } from 'next/font/google';
 const ModeComponent = dynamic(
@@ -50,6 +50,7 @@ export const LayoutComponent = ({ children }: { children: ReactNode }) => {
   const fetch = useFetch();
 
   const { backendUrl, billingEnabled, isGeneral } = useVariables();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   // Feedback icon component attaches Sentry feedback to a top-bar icon when DSN is present
   const searchParams = useSearchParams();
@@ -86,7 +87,7 @@ export const LayoutComponent = ({ children }: { children: ReactNode }) => {
             <ContinueProvider />
             <div
               className={clsx(
-                'flex flex-col min-h-screen min-w-screen text-newTextColor p-[12px]',
+                'flex flex-col min-h-screen w-full text-newTextColor p-[16px] md:p-[12px] overflow-x-hidden',
                 jakartaSans.className
               )}
             >
@@ -94,9 +95,9 @@ export const LayoutComponent = ({ children }: { children: ReactNode }) => {
               {user.tier === 'FREE' && isGeneral && billingEnabled ? (
                 <FirstBillingComponent />
               ) : (
-                <div className="flex-1 flex gap-[8px]">
+                <div className="flex-1 flex gap-[8px] flex-col md:flex-row">
                   <Support />
-                  <div className="flex flex-col bg-newBgColorInner w-[80px] rounded-[12px]">
+                  <div className="hidden md:flex flex-col bg-newBgColorInner w-[80px] rounded-[12px]">
                     <div
                       className={clsx(
                         'fixed h-full w-[64px] start-[17px] flex flex-1 top-0',
@@ -110,24 +111,84 @@ export const LayoutComponent = ({ children }: { children: ReactNode }) => {
                     </div>
                   </div>
                   <div className="flex-1 bg-newBgLineColor rounded-[12px] overflow-hidden flex flex-col gap-[1px] blurMe">
-                    <div className="flex bg-newBgColorInner h-[80px] px-[20px] items-center">
-                      <div className="text-[24px] font-[600] flex flex-1">
+                    <div className="flex bg-newBgColorInner h-[60px] md:h-[80px] px-[12px] md:px-[20px] items-center gap-[12px] md:gap-[0]">
+                      <div className="md:hidden flex items-center gap-[12px] flex-1">
+                        <div
+                          onClick={() => setIsMenuOpen(!isMenuOpen)}
+                          className="cursor-pointer text-textItemBlur hover:text-newTextColor"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          >
+                            {isMenuOpen ? (
+                              <>
+                                <line x1="18" y1="6" x2="6" y2="18" />
+                                <line x1="6" y1="6" x2="18" y2="18" />
+                              </>
+                            ) : (
+                              <>
+                                <line x1="3" y1="12" x2="21" y2="12" />
+                                <line x1="3" y1="6" x2="21" y2="6" />
+                                <line x1="3" y1="18" x2="21" y2="18" />
+                              </>
+                            )}
+                          </svg>
+                        </div>
+                        <Logo />
+                      </div>
+                      <div className="text-[18px] md:text-[24px] font-[600] flex flex-1 md:flex-1">
                         <Title />
                       </div>
-                      <div className="flex gap-[20px] text-textItemBlur">
-                        <OrganizationSelector />
+                      <div className="flex gap-[12px] md:gap-[20px] text-textItemBlur text-[12px] md:text-base">
+                        <div className="hidden lg:block">
+                          <OrganizationSelector />
+                        </div>
                         <div className="hover:text-newTextColor">
                           <ModeComponent />
                         </div>
-                        <div className="w-[1px] h-[20px] bg-blockSeparator" />
-                        <LanguageComponent />
-                        <ChromeExtensionComponent />
-                        <div className="w-[1px] h-[20px] bg-blockSeparator" />
+                        <div className="w-[1px] h-[20px] bg-blockSeparator hidden md:block" />
+                        <div className="hidden md:block">
+                          <LanguageComponent />
+                        </div>
+                        <div className="w-[1px] h-[20px] bg-blockSeparator hidden lg:block" />
+                        <div className="hidden lg:block">
+                          <ChromeExtensionComponent />
+                        </div>
+                        <div className="w-[1px] h-[20px] bg-blockSeparator hidden lg:block" />
                         <AttachToFeedbackIcon />
                         <NotificationComponent />
                       </div>
                     </div>
-                    <div className="flex flex-1 gap-[1px]">{children}</div>
+                    <div className="flex-1 flex flex-col lg:flex-row min-h-0 overflow-hidden relative p-[4px] lg:p-0">
+                      {isMenuOpen && (
+                        <div
+                          className="md:hidden fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm"
+                          onClick={() => setIsMenuOpen(false)}
+                        >
+                          <div
+                            className="absolute start-0 top-0 bottom-0 w-[280px] bg-newBgColorInner p-[20px] flex flex-col gap-[32px] overflow-y-auto z-[201]"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <Logo />
+                            <div
+                              onClick={() => setIsMenuOpen(false)}
+                              className="flex flex-col gap-[16px]"
+                            >
+                              <TopMenu />
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                      {children}
+                    </div>
                   </div>
                 </div>
               )}
@@ -138,3 +199,4 @@ export const LayoutComponent = ({ children }: { children: ReactNode }) => {
     </ContextWrapper>
   );
 };
+
diff --git a/apps/frontend/src/components/new-layout/layout.media.component.tsx b/apps/frontend/src/components/new-layout/layout.media.component.tsx
index 5835e445a..d60b35a94 100644
--- a/apps/frontend/src/components/new-layout/layout.media.component.tsx
+++ b/apps/frontend/src/components/new-layout/layout.media.component.tsx
@@ -4,7 +4,7 @@ import { MediaBox } from '@gitroom/frontend/components/media/media.component';
 
 export const MediaLayoutComponent = () => {
   return (
-    <div className="bg-newBgColorInner p-[20px] flex flex-1 flex-col gap-[15px] transition-all">
+    <div className="bg-newBgColorInner p-[12px] md:p-[20px] flex flex-1 flex-col gap-[12px] md:gap-[15px] transition-all">
       <MediaBox setMedia={() => {}} closeModal={() => {}} standalone={true} />
     </div>
   );
diff --git a/apps/frontend/src/components/platform-analytics/platform.analytics.tsx b/apps/frontend/src/components/platform-analytics/platform.analytics.tsx
index 0d2c865ed..b32b9c209 100644
--- a/apps/frontend/src/components/platform-analytics/platform.analytics.tsx
+++ b/apps/frontend/src/components/platform-analytics/platform.analytics.tsx
@@ -143,11 +143,11 @@ export const PlatformAnalytics = () => {
 
   if (!sortedIntegrations.length && !isLoading) {
     return (
-      <div className="bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all flex-1 justify-center items-center text-center">
+      <div className="bg-newBgColorInner p-[16px] md:p-[20px] flex flex-col gap-[12px] md:gap-[15px] transition-all flex-1 justify-center items-center text-center">
         <div>
-          <img src="/peoplemarketplace.svg" />
+          <img className="w-[120px] md:w-auto" src="/peoplemarketplace.svg" />
         </div>
-        <div className="text-[48px]">
+        <div className="text-[24px] md:text-[36px] lg:text-[48px] font-[600]">
           {t('can_t_show_analytics_yet', "Can't show analytics yet")}
           <br />
           {t(
@@ -155,7 +155,7 @@ export const PlatformAnalytics = () => {
             'You have to add Social Media channels'
           )}
         </div>
-        <div className="text-[20px]">
+        <div className="text-[14px] md:text-[18px]">
           {t('supported', 'Supported:')}
           {allowedIntegrations.map((p) => capitalize(p)).join(', ')}
         </div>
@@ -169,16 +169,16 @@ export const PlatformAnalytics = () => {
     );
   }
   return (
-    <>
+    <div className="flex flex-col md:flex-row w-full h-full overflow-hidden">
       <div
         className={clsx(
-          'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all',
-          collapseMenu === '1' ? 'group sidebar w-[100px]' : 'w-[260px]'
+          'bg-newBgColorInner flex md:flex-col flex-row gap-[12px] md:gap-[15px] transition-all overflow-x-auto md:overflow-x-visible items-center md:items-stretch scrollbar-hide shrink-0',
+          collapseMenu === '1' ? 'group sidebar w-full md:w-[100px]' : 'w-full md:w-[260px]'
         )}
       >
-        <div className="flex gap-[12px] flex-col">
-          <div className="flex items-center">
-            <h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500]">
+        <div className="flex gap-[8px] md:gap-[12px] flex-row md:flex-col flex-1 p-[16px] md:p-[20px]">
+          <div className="flex items-center hidden md:flex">
+            <h2 className="group-[.sidebar]:hidden flex-1 text-[16px] md:text-[20px] font-[500]">
               {t('channels')}
             </h2>
             <div
@@ -220,9 +220,10 @@ export const PlatformAnalytics = () => {
                 setCurrent(index);
               }}
               className={clsx(
-                'flex gap-[12px] items-center group/profile justify-center hover:bg-boxHover rounded-e-[8px]',
+                'flex gap-[12px] items-center group/profile justify-center hover:bg-boxHover rounded-[8px] md:rounded-e-[8px] px-3 md:px-0 py-2 md:py-0 bg-sixth md:bg-transparent min-w-fit md:min-w-0',
                 currentIntegration.id !== integration.id &&
-                  'opacity-20 hover:opacity-100 cursor-pointer'
+                'opacity-50 md:opacity-20 hover:opacity-100 cursor-pointer',
+                currentIntegration.id === integration.id && 'bg-boxHover md:bg-transparent'
               )}
             >
               <div
@@ -239,7 +240,7 @@ export const PlatformAnalytics = () => {
                     <div className="bg-primary/60 w-[39px] h-[46px] start-0 top-0 absolute rounded-full z-[199]" />
                   </div>
                 )}
-                <div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity">
+                <div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity hidden md:block">
                   <SVGLine />
                 </div>
                 <ImageWithFallback
@@ -270,10 +271,10 @@ export const PlatformAnalytics = () => {
           ))}
         </div>
       </div>
-      <div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
+      <div className="bg-newBgColorInner flex-1 flex-col flex p-[16px] md:p-[20px] gap-[8px] md:gap-[12px] overflow-y-auto w-full md:w-auto">
         {!!options.length && (
-          <div className="flex-1 flex flex-col gap-[14px]">
-            <div className="max-w-[200px]">
+          <div className="flex-1 flex flex-col gap-[10px] md:gap-[14px]">
+            <div className="max-w-[150px] md:max-w-[200px]">
               <Select
                 label=""
                 name="date"
@@ -296,6 +297,6 @@ export const PlatformAnalytics = () => {
           </div>
         )}
       </div>
-    </>
+    </div>
   );
 };
diff --git a/apps/frontend/src/components/platform-analytics/render.analytics.tsx b/apps/frontend/src/components/platform-analytics/render.analytics.tsx
index 55358f27e..7c68c9ea0 100644
--- a/apps/frontend/src/components/platform-analytics/render.analytics.tsx
+++ b/apps/frontend/src/components/platform-analytics/render.analytics.tsx
@@ -70,9 +70,9 @@ export const RenderAnalytics: FC<{
     );
   }
   return (
-    <div className="grid grid-cols-3 gap-[20px]">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[12px] md:gap-[16px] lg:gap-[20px]">
       {data?.length === 0 && (
-        <div>
+        <div className="text-[12px] md:text-[14px]">
           {t(
             'this_channel_needs_to_be_refreshed',
             'This channel needs to be refreshed,'
@@ -87,16 +87,16 @@ export const RenderAnalytics: FC<{
       )}
       {data?.map((p: any, index: number) => (
         <div key={`pl-${index}`} className="flex">
-          <div className="flex-1 bg-newTableHeader rounded-[8px] py-[10px] px-[16px] gap-[10px] flex flex-col">
-            <div className="flex items-center gap-[14px]">
-              <div className="text-[20px]">{p.label}</div>
+          <div className="flex-1 bg-newTableHeader rounded-[8px] py-[8px] md:py-[10px] px-[12px] md:px-[16px] gap-[8px] md:gap-[10px] flex flex-col">
+            <div className="flex items-center gap-[10px] md:gap-[14px]">
+              <div className="text-[14px] md:text-[18px] lg:text-[20px] font-[500]">{p.label}</div>
             </div>
             <div className="flex-1">
-              <div className="h-[156px] relative">
+              <div className="h-[120px] md:h-[140px] lg:h-[156px] relative">
                 <ChartSocial {...p} key={`p-${index}`} />
               </div>
             </div>
-            <div className="text-[50px] leading-[60px]">{total[index]}</div>
+            <div className="text-[28px] md:text-[36px] lg:text-[50px] leading-[32px] md:leading-[40px] lg:leading-[60px] font-[600]">{total[index]}</div>
           </div>
         </div>
       ))}
diff --git a/apps/frontend/src/components/plugs/plug.tsx b/apps/frontend/src/components/plugs/plug.tsx
index de6978ec1..a62b72868 100644
--- a/apps/frontend/src/components/plugs/plug.tsx
+++ b/apps/frontend/src/components/plugs/plug.tsx
@@ -102,8 +102,8 @@ export const PlugPop: FC<{
           ...acc,
           [field.name]: field.validation
             ? string().matches(convertBackRegex(field.validation), {
-                message: 'Invalid value',
-              })
+              message: 'Invalid value',
+            })
             : null,
         };
       }, {})
@@ -174,6 +174,7 @@ export const PlugItem: FC<{
   };
 }> = (props) => {
   const { plug, addPlug, data } = props;
+  const t = useT();
   const [activated, setActivated] = useState(!!data?.activated);
   useEffect(() => {
     setActivated(!!data?.activated);
@@ -198,13 +199,13 @@ export const PlugItem: FC<{
     <div
       onClick={() => addPlug(data)}
       key={plug.title}
-      className="w-full h-[300px] rounded-[8px] bg-newTableHeader hover:bg-newTableBorder"
+      className="w-full min-h-[220px] md:h-[280px] rounded-[12px] bg-newBgColor border border-newBorder hover:border-newTableBorder transition-all cursor-pointer overflow-hidden flex flex-col"
     >
-      <div key={plug.title} className="p-[16px] h-full flex flex-col flex-1">
-        <div className="flex">
-          <div className="text-[20px] mb-[8px] flex-1">{plug.title}</div>
+      <div key={plug.title} className="p-[20px] h-full flex flex-col flex-1 gap-[12px]">
+        <div className="flex items-start justify-between">
+          <div className="text-[18px] md:text-[20px] flex-1 font-[600] leading-tight">{plug.title}</div>
           {!!data && (
-            <div onClick={(e) => e.stopPropagation()}>
+            <div onClick={(e) => e.stopPropagation()} className="shrink-0 scale-90 md:scale-100 origin-right">
               <Slider
                 value={activated ? 'on' : 'off'}
                 onChange={changeActivated}
@@ -213,8 +214,12 @@ export const PlugItem: FC<{
             </div>
           )}
         </div>
-        <div className="flex-1">{plug.description}</div>
-        <Button>{!data ? 'Set Plug' : 'Edit Plug'}</Button>
+        <div className="flex-1 text-[14px] md:text-[15px] text-textItemBlur line-clamp-4 md:line-clamp-none">
+          {plug.description}
+        </div>
+        <div className="mt-auto">
+          <Button className="w-full md:w-auto">{!data ? t('set_plug', 'Set Plug') : t('edit_plug', 'Edit Plug')}</Button>
+        </div>
       </div>
     </div>
   );
@@ -263,7 +268,7 @@ export const Plug = () => {
     return null;
   }
   return (
-    <div className="grid grid-cols-3 gap-[30px]">
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-[16px] md:gap-[24px]">
       {plug.plugs.map((p) => (
         <PlugItem
           key={p.title + '-' + plug.providerId}
diff --git a/apps/frontend/src/components/plugs/plugs.tsx b/apps/frontend/src/components/plugs/plugs.tsx
index ca9ae1807..a0f15a81f 100644
--- a/apps/frontend/src/components/plugs/plugs.tsx
+++ b/apps/frontend/src/components/plugs/plugs.tsx
@@ -86,7 +86,7 @@ export const Plugs = () => {
 
   if (isLoading || plugLoading) {
     return (
-      <div className="bg-newBgColorInner p-[20px] flex flex-1 flex-col gap-[15px] transition-all items-center justify-center">
+      <div className="bg-newBgColorInner p-[12px] md:p-[20px] flex flex-1 flex-col gap-[12px] md:gap-[15px] transition-all items-center justify-center">
         <LoadingComponent />
       </div>
     );
@@ -94,11 +94,11 @@ export const Plugs = () => {
 
   if (!sortedIntegrations.length && !isLoading) {
     return (
-      <div className="bg-newBgColorInner p-[20px] flex flex-1 flex-col gap-[15px] transition-all items-center justify-center">
+      <div className="bg-newBgColorInner p-[12px] md:p-[20px] flex flex-1 flex-col gap-[12px] md:gap-[15px] transition-all items-center justify-center">
         <div>
-          <img src="/peoplemarketplace.svg" />
+          <img className="w-[120px] md:w-auto" src="/peoplemarketplace.svg" />
         </div>
-        <div className="text-[48px]">
+        <div className="text-[20px] md:text-[32px] lg:text-[48px] font-[600] text-center leading-[1.2]">
           {t(
             'there_are_not_plugs_matching_your_channels',
             'There are not plugs matching your channels'
@@ -119,21 +119,21 @@ export const Plugs = () => {
     );
   }
   return (
-    <>
+    <div className="flex flex-col md:flex-row w-full h-full overflow-hidden">
       <div
         className={clsx(
-          'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all',
-          collapseMenu === '1' ? 'group sidebar w-[100px]' : 'w-[260px]'
+          'bg-newBgColorInner flex md:flex-col flex-row gap-[16px] md:gap-[15px] transition-all overflow-x-auto md:overflow-x-visible items-center md:items-stretch scrollbar-hide shrink-0 shadow-sm md:shadow-none',
+          collapseMenu === '1' ? 'group sidebar w-full md:w-[100px]' : 'w-full md:w-[260px]'
         )}
       >
-        <div className="flex gap-[12px] flex-col">
+        <div className="flex gap-[8px] md:gap-[12px] flex-row md:flex-col flex-1 p-[16px] md:p-[20px]">
           <div className="flex items-center">
-            <h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500]">
+            <h2 className="group-[.sidebar]:hidden flex-1 text-[18px] md:text-[20px] font-[600]">
               {t('channels')}
             </h2>
             <div
               onClick={() => setCollapseMenu(collapseMenu === '1' ? '0' : '1')}
-              className="group-[.sidebar]:rotate-[180deg] group-[.sidebar]:mx-auto text-btnText bg-btnSimple rounded-[6px] w-[24px] h-[24px] flex items-center justify-center cursor-pointer select-none"
+              className="group-[.sidebar]:rotate-[180deg] group-[.sidebar]:mx-auto text-btnText bg-btnSimple rounded-[6px] w-[24px] h-[24px] flex items-center justify-center cursor-pointer select-none hidden md:flex"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -170,9 +170,10 @@ export const Plugs = () => {
                 setCurrent(index);
               }}
               className={clsx(
-                'flex gap-[8px] items-center justify-center group/profile hover:bg-boxHover rounded-e-[8px]',
+                'flex gap-[12px] items-center group/profile justify-center hover:bg-boxHover rounded-[8px] md:rounded-e-[8px] px-3 md:px-0 py-2 md:py-0 bg-sixth md:bg-transparent min-w-fit md:min-w-0',
                 currentIntegration.id !== integration.id &&
-                  'opacity-20 hover:opacity-100 cursor-pointer'
+                'opacity-50 md:opacity-20 hover:opacity-100 cursor-pointer',
+                currentIntegration.id === integration.id && 'bg-boxHover md:bg-transparent'
               )}
             >
               <div
@@ -189,7 +190,7 @@ export const Plugs = () => {
                     <div className="bg-primary/60 w-[39px] h-[46px] start-0 top-0 absolute rounded-full z-[199]" />
                   </div>
                 )}
-                <div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity">
+                <div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity hidden md:block">
                   <SVGLine />
                 </div>
                 <ImageWithFallback
@@ -220,11 +221,11 @@ export const Plugs = () => {
           ))}
         </div>
       </div>
-      <div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
+      <div className="bg-newBgColorInner flex-1 flex-col flex p-[16px] md:p-[20px] gap-[16px] md:gap-[20px] overflow-y-auto w-full md:w-auto shadow-sm">
         <PlugsContext.Provider value={currentIntegrationPlug}>
           <Plug />
         </PlugsContext.Provider>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/apps/frontend/src/components/third-parties/third-party.component.tsx b/apps/frontend/src/components/third-parties/third-party.component.tsx
index e6f344bc9..aec93fc5c 100644
--- a/apps/frontend/src/components/third-parties/third-party.component.tsx
+++ b/apps/frontend/src/components/third-parties/third-party.component.tsx
@@ -113,16 +113,16 @@ export const ThirdPartyComponent = () => {
   const [collapseMenu, setCollapseMenu] = useCookie('collapseMenu', '0');
 
   return (
-    <>
+    <div className="flex flex-col md:flex-row w-full h-full overflow-hidden">
       <div
         className={clsx(
-          'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all',
-          collapseMenu === '1' ? 'group sidebar w-[100px]' : 'w-[260px]'
+          'bg-newBgColorInner flex md:flex-col flex-row transition-all overflow-x-auto md:overflow-x-visible items-center md:items-stretch scrollbar-hide shrink-0',
+          collapseMenu === '1' ? 'group sidebar w-full md:w-[100px]' : 'w-full md:w-[260px]'
         )}
       >
-        <div className="flex gap-[12px] flex-col">
-          <div className="flex items-center">
-            <h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500]">
+        <div className="flex gap-[8px] md:gap-[12px] flex-row md:flex-col flex-1 p-[16px] md:p-[20px]">
+          <div className="flex items-center hidden md:flex">
+            <h2 className="group-[.sidebar]:hidden flex-1 text-[16px] md:text-[20px] font-[500]">
               {t('integrations')}
             </h2>
             <div
@@ -146,27 +146,29 @@ export const ThirdPartyComponent = () => {
               </svg>
             </div>
           </div>
-          <div className="flex flex-col gap-[10px]">
-            <div className="flex-1 flex flex-col gap-[14px]">
+          <div className="flex flex-col gap-[10px] flex-1">
+            <div className="flex-1 flex flex-row md:flex-col gap-[14px]">
               <div
                 className={clsx(
-                  'gap-[16px] flex flex-col relative justify-center group/profile hover:bg-boxHover rounded-e-[8px]'
+                  'gap-[8px] md:gap-[16px] flex flex-row md:flex-col relative md:justify-center rounded-[8px] md:rounded-e-[8px]'
                 )}
               >
                 {!isLoading && !data?.length ? (
-                  <div>No Integrations Yet</div>
+                  <div className="whitespace-nowrap px-2">No Integrations Yet</div>
                 ) : (
                   data?.map((p: any) => (
                     <div
                       key={p.id}
-                      className={clsx('flex gap-[8px] items-center')}
+                      className={clsx(
+                        'flex gap-[12px] items-center group/profile justify-center hover:bg-boxHover rounded-[8px] md:rounded-e-[8px] px-3 md:px-0 py-2 md:py-0 bg-sixth md:bg-transparent min-w-fit md:min-w-0'
+                      )}
                     >
-                      <div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity">
+                      <div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity hidden md:block">
                         <SVGLine />
                       </div>
                       <div
                         className={clsx(
-                          'relative rounded-full flex justify-center items-center bg-fifth'
+                          'relative rounded-full flex justify-center items-center bg-fifth shrink-0'
                         )}
                         data-tooltip-id="tooltip"
                         data-tooltip-content={p.title}
@@ -200,9 +202,9 @@ export const ThirdPartyComponent = () => {
           </div>
         </div>
       </div>
-      <div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
+      <div className="bg-newBgColorInner flex-1 flex-col flex p-[12px] md:p-[20px] gap-[8px] md:gap-[12px] overflow-y-auto w-full md:w-auto">
         <ThirdPartyListComponent reload={mutate} />
       </div>
-    </>
+    </div>
   );
 };
diff --git a/apps/frontend/src/components/third-parties/third-party.list.component.tsx b/apps/frontend/src/components/third-parties/third-party.list.component.tsx
index 9dcaea7b2..e1b00e7c5 100644
--- a/apps/frontend/src/components/third-parties/third-party.list.component.tsx
+++ b/apps/frontend/src/components/third-parties/third-party.list.component.tsx
@@ -126,7 +126,7 @@ export const ThirdPartyListComponent: FC<{ reload: () => void }> = (props) => {
   );
 
   return (
-    <div className="grid grid-cols-4 gap-[10px] justify-items-center justify-center">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-[10px] justify-items-center justify-center">
       {data?.map((p: any) => (
         <div
           onClick={addApiKey(p.title, p.identifier)}
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
index cb2ccce80..ac97bdfd7 100644
--- a/apps/frontend/tailwind.config.js
+++ b/apps/frontend/tailwind.config.js
@@ -242,6 +242,14 @@ module.exports = {
         },
       }),
       screens: {
+        // Standard Tailwind breakpoints
+        xs: '320px',
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1536px',
+        // Custom breakpoints for app
         mobile: {
           raw: '(max-width: 1025px)',
         },
@@ -260,14 +268,29 @@ module.exports = {
         custom: {
           raw: '(max-height: 800px)',
         },
-        xs: {
-          max: '401px',
+        // Mobile-first breakpoints
+        'max-xs': {
+          raw: '(max-width: 319px)',
+        },
+        'max-sm': {
+          raw: '(max-width: 639px)',
+        },
+        'max-md': {
+          raw: '(max-width: 767px)',
+        },
+        'max-lg': {
+          raw: '(max-width: 1023px)',
+        },
+        // Touch devices
+        touch: {
+          raw: '(hover: none) and (pointer: coarse)',
         },
       },
     },
   },
   plugins: [
     require('tailwind-scrollbar'),
+    require('tailwind-scrollbar-hide'),
     require('tailwindcss-rtl'),
     function ({ addVariant }) {
       addVariant('child', '& > *');
diff --git a/libraries/react-shared-libraries/src/form/button.tsx b/libraries/react-shared-libraries/src/form/button.tsx
index 97979dfc4..a0e87211e 100644
--- a/libraries/react-shared-libraries/src/form/button.tsx
+++ b/libraries/react-shared-libraries/src/form/button.tsx
@@ -32,9 +32,8 @@ export const Button: FC<
       ref={ref}
       className={clsx(
         (props.disabled || loading) && 'opacity-50 pointer-events-none',
-        `${
-          props.secondary ? 'bg-third' : 'bg-forth text-white'
-        } px-[24px] h-[40px] cursor-pointer items-center justify-center flex relative`,
+        `${props.secondary ? 'bg-third' : 'bg-forth text-white'
+        } px-[16px] md:px-[24px] h-[44px] md:h-[40px] cursor-pointer items-center justify-center flex relative`,
         props?.className
       )}
     >
diff --git a/package.json b/package.json
index 5973b71fe..3cffe3346 100644
--- a/package.json
+++ b/package.json
@@ -226,6 +226,7 @@
     "sweetalert2": "11.4.8",
     "swr": "^2.2.5",
     "tailwind-scrollbar": "^3.1.0",
+    "tailwind-scrollbar-hide": "^4.0.0",
     "tailwindcss": "3.4.17",
     "tailwindcss-rtl": "^0.9.0",
     "timezones-list": "^3.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7046d4cd1..e967a941f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -573,6 +573,9 @@ importers:
       tailwind-scrollbar:
         specifier: ^3.1.0
         version: 3.1.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.5.7(@swc/helpers@0.5.13))(@types/node@18.16.9)(typescript@5.5.4)))
+      tailwind-scrollbar-hide:
+        specifier: ^4.0.0
+        version: 4.0.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.5.7(@swc/helpers@0.5.13))(@types/node@18.16.9)(typescript@5.5.4)))
       tailwindcss:
         specifier: 3.4.17
         version: 3.4.17(ts-node@10.9.2(@swc/core@1.5.7(@swc/helpers@0.5.13))(@types/node@18.16.9)(typescript@5.5.4))
@@ -8162,9 +8165,11 @@ packages:
 
   '@walletconnect/sign-client@2.19.0':
     resolution: {integrity: sha512-+GkuJzPK9SPq+RZgdKHNOvgRagxh/hhYWFHOeSiGh3DyAQofWuFTq4UrN/MPjKOYswSSBKfIa+iqKYsi4t8zLQ==}
+    deprecated: 'Reliability and performance improvements. See: https://github.com/WalletConnect/walletconnect-monorepo/releases'
 
   '@walletconnect/sign-client@2.19.1':
     resolution: {integrity: sha512-OgBHRPo423S02ceN3lAzcZ3MYb1XuLyTTkKqLmKp/icYZCyRzm3/ynqJDKndiBLJ5LTic0y07LiZilnliYqlvw==}
+    deprecated: 'Reliability and performance improvements. See: https://github.com/WalletConnect/walletconnect-monorepo/releases'
 
   '@walletconnect/solana-adapter@0.0.8':
     resolution: {integrity: sha512-Qb7MT8SdkeBldfUCmF+rYW6vL98mxPuT1yAwww5X2vpx7xEPZvFCoAKnyT5fXu0v56rMxhW3MGejnHyyYdDY7Q==}
@@ -8183,9 +8188,11 @@ packages:
 
   '@walletconnect/universal-provider@2.19.0':
     resolution: {integrity: sha512-e9JvadT5F8QwdLmd7qBrmACq04MT7LQEe1m3X2Fzvs3DWo8dzY8QbacnJy4XSv5PCdxMWnua+2EavBk8nrI9QA==}
+    deprecated: 'Reliability and performance improvements. See: https://github.com/WalletConnect/walletconnect-monorepo/releases'
 
   '@walletconnect/universal-provider@2.19.1':
     resolution: {integrity: sha512-4rdLvJ2TGDIieNWW3sZw2MXlX65iHpTuKb5vyvUHQtjIVNLj+7X/09iUAI/poswhtspBK0ytwbH+AIT/nbGpjg==}
+    deprecated: 'Reliability and performance improvements. See: https://github.com/WalletConnect/walletconnect-monorepo/releases'
 
   '@walletconnect/utils@2.19.0':
     resolution: {integrity: sha512-LZ0D8kevknKfrfA0Sq3Hf3PpmM8oWyNfsyWwFR51t//2LBgtN2Amz5xyoDDJcjLibIbKAxpuo/i0JYAQxz+aPA==}
@@ -11951,6 +11958,7 @@ packages:
 
   jpeg-exif@1.1.4:
     resolution: {integrity: sha512-a+bKEcCjtuW5WTdgeXFzswSrdqi0jk4XlEtZlx5A94wCoBpFjfFTbo/Tra5SpNCl/YFZPvcV1dJc+TAYeg6ROQ==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
   js-base64@2.6.4:
     resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
@@ -15631,6 +15639,11 @@ packages:
   tailwind-merge@1.14.0:
     resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
 
+  tailwind-scrollbar-hide@4.0.0:
+    resolution: {integrity: sha512-gobtvVcThB2Dxhy0EeYSS1RKQJ5baDFkamkhwBvzvevwX6L4XQfpZ3me9s25Ss1ecFVT5jPYJ50n+7xTBJG9WQ==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 4.0.0 || >= 4.0.0-beta.8 || >= 4.0.0-alpha.20'
+
   tailwind-scrollbar@3.1.0:
     resolution: {integrity: sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==}
     engines: {node: '>=12.13.0'}
@@ -15655,6 +15668,7 @@ packages:
   tar@6.2.1:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me
 
   tcp-port-used@1.0.2:
     resolution: {integrity: sha512-l7ar8lLUD3XS1V2lfoJlCBaeoaWo/2xfYt81hM7VlvR4RrMVFqfmzfhLVk40hAb368uitje5gPtBRL1m/DGvLA==}
@@ -16705,10 +16719,12 @@ packages:
   whatwg-encoding@2.0.0:
     resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
     engines: {node: '>=12'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
 
   whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
 
   whatwg-fetch@3.6.20:
     resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==}
@@ -36643,6 +36659,10 @@ snapshots:
 
   tailwind-merge@1.14.0: {}
 
+  tailwind-scrollbar-hide@4.0.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.5.7(@swc/helpers@0.5.13))(@types/node@18.16.9)(typescript@5.5.4))):
+    dependencies:
+      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.5.7(@swc/helpers@0.5.13))(@types/node@18.16.9)(typescript@5.5.4))
+
   tailwind-scrollbar@3.1.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.5.7(@swc/helpers@0.5.13))(@types/node@18.16.9)(typescript@5.5.4))):
     dependencies:
       tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.5.7(@swc/helpers@0.5.13))(@types/node@18.16.9)(typescript@5.5.4))