diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e1e561d..b34d304 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,7 +20,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.className} min-h-[100vh] bg-white antialiased`}>{children}</body>
+      <body className={`${inter.className} flex min-h-screen flex-col bg-white antialiased`}>
+        {children}
+      </body>
     </html>
   )
 }
diff --git a/src/components/ui/CopilotSelector.tsx b/src/components/ui/CopilotSelector.tsx
index 6101d6e..d683dd7 100644
--- a/src/components/ui/CopilotSelector.tsx
+++ b/src/components/ui/CopilotSelector.tsx
@@ -19,6 +19,8 @@ export const CopilotSelector = ({
 }: CopilotSelectorProps) => {
   if (typeof window !== 'undefined')
     return (
+      // Note: if in case the UI responsive issue does not work in the future, need to create a custom react portal and wrap this component with it.
+      // Since we are using the same input field given by this selector component for now, need to create a separate input field for this implementation
       <div className="w-64">
         <UserCompanySelector
           name={name}
diff --git a/src/features/sync/components/Table.tsx b/src/features/sync/components/Table.tsx
index 3e2cf63..d69575b 100644
--- a/src/features/sync/components/Table.tsx
+++ b/src/features/sync/components/Table.tsx
@@ -177,27 +177,29 @@ export const MappingTable = () => {
   const { openDialog, setOpenDialog, handleRemoveSync, openConfirmDialog } = useRemoveChannelSync()
 
   return (
-    <div className="m-10 mt-0 border border-gray-200 bg-white">
-      <table className="w-full">
-        <thead className="border-gray-200 border-b bg-gray-50">
-          <tr>
-            {columns.map((column) => (
-              <th
-                key={column.key}
-                className={cn(
-                  'px-6 py-3 text-left font-medium text-gray-500 text-xs uppercase',
-                  column.className,
-                )}
-              >
-                {column.title}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-gray-200 bg-white">
-          <MappingTableRow openConfirmDialog={openConfirmDialog} />
-        </tbody>
-      </table>
+    <div className="m-10 mt-0 min-h-0 flex-1 overflow-x-auto">
+      <div className="h-full w-full">
+        <table className="w-full">
+          <thead className="border border-gray-200 bg-gray-50">
+            <tr>
+              {columns.map((column) => (
+                <th
+                  key={column.key}
+                  className={cn(
+                    'px-6 py-3 text-left font-medium text-gray-500 text-xs uppercase',
+                    column.className,
+                  )}
+                >
+                  {column.title}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 border border-gray-200 bg-white">
+            <MappingTableRow openConfirmDialog={openConfirmDialog} />
+          </tbody>
+        </table>
+      </div>
       {openDialog && (
         <Dialog
           open={openDialog}
