diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx
index c751d7f77b8f08020447dd71584bb13d6d5a2c84..00c6f66f8027391bc733e68d349a58afbf273a04 100644
--- a/src/components/navigation/SidebarBase.tsx
+++ b/src/components/navigation/SidebarBase.tsx
@@ -16,6 +16,7 @@ export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
     flex-shrink: 0;
     flex-direction: column;
     background: var(--secondary-background);
+    border-end-start-radius: 8px;
 
     ${ props => props.padding && isTouchscreenDevice && css`
         padding-bottom: 50px;
diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx
index 2d10ce2a2f97df8b44dcaa255d1a63aa5866a58c..49e5795951f632cb783c283744640de2dc4ec939 100644
--- a/src/components/navigation/left/ServerSidebar.tsx
+++ b/src/components/navigation/left/ServerSidebar.tsx
@@ -28,6 +28,8 @@ const ServerBase = styled.div`
     background: var(--secondary-background);
 
     border-start-start-radius: 8px;
+    border-end-start-radius: 8px;
+    overflow: hidden;
 `;
 
 const ServerList = styled.div`
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index 747a24faa5cbac6d6e2dd9fa30487e85f0d3219a..f3948d6f631fde9b2fdb26aa3a956e52fb89045f 100644
--- a/src/components/ui/Header.tsx
+++ b/src/components/ui/Header.tsx
@@ -7,19 +7,15 @@ interface Props {
 }
 
 export default styled.div<Props>`
-    height: 56px;
-    font-weight: 600;
-    user-select: none;
-
     display: flex;
+    height: 48px;
+    font-weight: 600;
     align-items: center;
-
-    gap: 10px;
+    user-select: none;
+    gap: 6px;
     flex: 0 auto;
-    display: flex;
-    padding: 0 20px;
+    padding: 0 16px;
     flex-shrink: 0;
-    align-items: center;
 
     background-color: var(--primary-header);
     background-size: cover !important;
@@ -29,8 +25,12 @@ export default styled.div<Props>`
         flex-shrink: 0;
     }
 
-    @media only screen and (max-width: 768px) {
+    /*@media only screen and (max-width: 768px) {
         padding: 0 12px;
+    }*/
+
+    @media (pointer: coarse) {
+        height: 56px;
     }
     
 
@@ -45,7 +45,6 @@ export default styled.div<Props>`
     ` }
 
     ${ props => props.borders && css`
-        border-start-start-radius: 8px;
-        border-end-start-radius: 8px;
+        /*border-start-start-radius: 8px;*/
     ` }
 `;
diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx
index a67204fe33646ddf3b52607e11d4d62fc703f9df..5dae6a04de8ada269e3c29d64b700a4d27aa6fbc 100644
--- a/src/pages/channels/ChannelHeader.tsx
+++ b/src/pages/channels/ChannelHeader.tsx
@@ -11,6 +11,7 @@ import { At, Hash } from "@styled-icons/boxicons-regular";
 import { Notepad, Group } from "@styled-icons/boxicons-solid";
 import { useStatusColour } from "../../components/common/user/UserIcon";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 export interface ChannelHeaderProps {
     channel: Channel,
@@ -25,14 +26,14 @@ const Info = styled.div`
 
     display: flex;
     gap: 8px;
-    align-items: baseline;
+    align-items: center;
 
     * {
         display: inline-block;
     }
 
     .divider {
-        height: 14px;
+        height: 20px;
         margin: 0 5px;
         padding-left: 1px;
         background-color: var(--tertiary-background);
@@ -48,6 +49,7 @@ const Info = styled.div`
 
     .desc {
         cursor: pointer;
+        margin-top: 2px;
         font-size: 0.8em;
         font-weight: 400;
         color: var(--secondary-foreground);
@@ -82,7 +84,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
             { icon }
             <Info>
                 <span className="name">{ name }</span>
-                {channel.channel_type === "DirectMessage" && (
+                {isTouchscreenDevice && channel.channel_type === "DirectMessage" && (
                     <>
                         <div className="divider" />
                         <span className="desc">
@@ -91,7 +93,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
                         </span>
                     </>
                 )}
-                {(channel.channel_type === "Group" || channel.channel_type === "TextChannel") && channel.description && (
+                {!isTouchscreenDevice && (channel.channel_type === "Group" || channel.channel_type === "TextChannel") && channel.description && (
                     <>
                         <div className="divider" />
                         <span
@@ -102,6 +104,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
                                     channel_id: channel._id
                                 })
                             }>
+                                
                             <Markdown content={channel.description.split("\n")[0] ?? ""} disallowBigEmoji />
                         </span>
                     </>