diff --git a/apps/site/app/channel/[id]/[index]/page.tsx b/apps/site/app/channel/[id]/[index]/page.tsx
index e94645c2..e552e324 100644
--- a/apps/site/app/channel/[id]/[index]/page.tsx
+++ b/apps/site/app/channel/[id]/[index]/page.tsx
@@ -158,9 +158,12 @@ export default async function ItemPage({
     ))
 
   return (
-    <Stack className="h-[calc(100dvh-var(--header-height))] md:flex-row ">
-      <div className="bg-[#F3F4F6] w-full h-full md:w-[78%]">{content}</div>
+    <Stack className="h-[calc(100dvh-(var(--header-height)))] md:flex-row ">
+      <div className="bg-[#F3F4F6] w-full h-[70dvh] md:h-full md:w-[78%]">
+        {content}
+      </div>
       <Separator className="hidden md:block bg-border" orientation="vertical" />
+      {/* <div>hi</div> */}
       <div className="md:overflow-y-auto md:w-[22%]">
         <ItemSidebar
           // @ts-ignore
diff --git a/apps/site/components/server/ItemSidebar.tsx b/apps/site/components/server/ItemSidebar.tsx
index ba9827cb..78348901 100644
--- a/apps/site/components/server/ItemSidebar.tsx
+++ b/apps/site/components/server/ItemSidebar.tsx
@@ -87,9 +87,13 @@ export function ItemSidebar({
   // </div>
 
   return (
-    <Stack className="p-5 h-[320px] md:h-full border-t border-border md:border-none">
-      <Flex className="justify-between items-center pb-[30px]">
-        <Typography>Info</Typography>
+    <Stack className="p-5 gap-y-5 md:gap-y-[30px] h-[calc(100dvh-(var(--header-height)+70dvh))] md:h-full border-t border-border md:border-none">
+      <Flex className="justify-between items-center">
+        <Typography className="hidden md:block">Info</Typography>
+        <div className="md:hidden">
+          <Typography className="truncate">{itemMetadata?.name}</Typography>
+          <Username id={itemContext.item.createdById} />
+        </div>
         <Flex className="gap-x-2">
           <Button variant="link" disabled={invalidPrev}>
             <Link href={`/channel/${itemContext.channelId}/${prevIndex}`}>
@@ -102,23 +106,20 @@ export function ItemSidebar({
             </Link>
           </Button>
         </Flex>
-        {/* <IndexInfoToggle /> */}
-        {/* <Link
-          href={`/channel/${itemContext.channelId}`}
-          className="underline-offset-2 transition-all hover:underline"
-        >
-          <Typography>Go to channel</Typography>
-        </Link> */}
+      </Flex>
+      <Flex className="md:hidden">
+        <AddToChannelDialog item={itemContext.item} />
       </Flex>
       <Stack className="justify-between md:justify-start">
-        <Stack className="gap-y-5">
+        <Stack className="hidden md:flex gap-y-5">
+          {/* <Stack className=""> */}
           <div>
             <Typography className="truncate">{itemMetadata?.name}</Typography>
             <Username id={itemContext.item.createdById} />
           </div>
           <Typography>{'--'}</Typography>
         </Stack>
-        <Stack className=" gap-y-[7px] pt-5 md:pt-[45px]">
+        <Stack className=" gap-y-[7px] md:pt-[45px]">
           <Flex className="justify-between">
             <Typography>Channel</Typography>
             <Flex className="items-center space-x-[6px]">
@@ -166,12 +167,12 @@ export function ItemSidebar({
         </Stack>
       </Stack>
 
-      <Flex className="py-[30px]">
+      <Flex className="hidden md:block">
         <AddToChannelDialog item={itemContext.item} />
       </Flex>
 
       {/* <Separator /> */}
-      <Flex className="py-[30px]">
+      <Flex className="pt-5 md:pt-[30px]">
         <Typography>{`Index [${itemIndex}/${indexLength}]`}</Typography>
       </Flex>