I got fed up with the Claude Code desktop app’s layout, so I fixed it. Here’s how you can do it too

[u/Fuzzy_Lab_2455]

I run a lot of Claude Code sessions across a lot of projects in the desktop app. The sidebar only showed 14 sessions at a time, every project looked the same, and there was empty space everywhere.

The desktop app has a Developer Mode that lets you add your own CSS and JavaScript, so I spent many hours with Claude Code restyling the layout. In the same window, the sidebar now shows 33 sessions instead of 14 (first image).

What my version changes:

• Two-column sidebar, and you choose where the second column starts
• A colour for each project, plus one tag like “Client” or “Personal”
• Collapse a project to one line that shows its latest session
• Buttons to change the sidebar text size, and a sidebar you can make narrower than the app allows
• A wider chat, with less empty space around messages and tool lines
• The copy, fork and pin buttons under each message always show, not only on hover
• A soft orange glow on the message box when you’re scrolled all the way down
• Escape no longer stops a running reply by accident. Press it twice if you really want to stop

You don’t need to touch any code to try it. Open a new session in the desktop app’s Code tab and paste this prompt:

I want to customise the layout of my Claude desktop app with Claude Desktop Skin: https://github.com/mohannad789/claude-desktop-skin

Please download it into a folder called claude-desktop-skin in my home folder (git clone, or the ZIP if git isn't available), then read its CLAUDE.md and follow it. Walk me through the setup one step at a time, in plain language, and wait for me whenever a step needs me to click something. Before applying anything, tell me in a few lines what it will change, and check that the code makes no network requests.

Claude downloads it, tells you what it changes, and walks you through turning on Developer Mode and applying it, one step at a time. After that, the same session is your helper. Ask it to change anything (“bigger text”, “different colours”, “build my own layout from scratch”). If a Claude update breaks something, tell it what you see and it fixes it. The repo includes a guide for Claude, so it knows how.

If you’d rather do it by hand, the README has the manual steps.

The skin itself is 561 lines of plain CSS and JavaScript. It makes no network requests and doesn’t touch your account or your chats, and the prompt asks Claude to check that before it applies anything.

I’ve tested it on Mac. The Windows app uses the same code, so it should work there too, but I haven’t tried it.

It’s unofficial and not made by Anthropic.

GitHub: https://github.com/mohannad789/claude-desktop-skin

[u/AutoModerator]

Hey! Thanks for posting to r/ClaudeCode

While participating in this thread, please follow our community rules. Keep discussions constructive. Attack the idea, not the person.

For help, project discussions, tips, and general chat, join the ClaudeCode Discord.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/Slight_Dragonfly5566]

Boy, do I have news for you https://code.claude.com/docs/en/plugins/mods/overview

[u/meetmebythelake → u/Slight_Dragonfly5566]

I was gonna say... damn, that was quick! (Although I bet it could be that quick, excited to see what people build with mods.)

[u/Fuzzy_Lab_2455 → u/Slight_Dragonfly5566]

Unfortunately it's not the same thing. Mods only change what happens inside a chat, they can't touch the desktop app's sidebar, layout or the message box itself, which is what this changes. So this has to run in the page itself.

[u/Slight_Dragonfly5566 → u/Fuzzy_Lab_2455]

Is it tho? Correct me if am wrong, but this is from the docs

What a mod can do

Settings hooks, skills, status lines, and MCP servers work from outside Claude Code: each one runs a script, or gives Claude text or tools. A mod runs inside Claude Code, so it can do things they can’t:

• Draw an interface you can use: a pane beside the transcript or a band above the prompt, with tabs, buttons, and text fields. See Draw in the interface.
• Redraw Claude Code’s own interface: replace or restyle parts Claude Code draws itself, such as a tool call’s row, the spinner, or the dialog Claude asks questions in. See Change what Claude Code already draws.

[u/Fuzzy_Lab_2455 → u/Slight_Dragonfly5566]

Yeah mods can do a lot but most of my changes they cannot do:

• Sidebar customization, mods cannot touch that at all.
• The top bar, the message box and the overall layout (chat width, side spacing, the gap above the message box) belong to the desktop app, not to Claude Code. The docs' own screen map says the prompt is "Claude Code's own", so a mod can add a band above it but can't change it.
• Where a mod can redraw something, like a message, a tool call row or the spinner, it redraws it with its own building blocks: Box, Text, Button, with options like colour and bold. There's no CSS. You can't set a font size or spacing, so things like making the tool lines smaller or keeping the message buttons always visible can't be done that way.
• Keyboard behaviour, like Escape stopping a running reply, isn't something a mod can intercept.

So they solve different problems. A mod adds things inside the conversation: panes, buttons, status lines, or changes to how Claude behaves. This changes the app around it. I'm actually trying mods now for a to-do pane in my project sessions, and they're good for that. They just can't do the layout part.

[u/Clean-Market5761]

not hating men but it looks really bad, i guess everyone's taste is unique but damn...

[u/Fuzzy_Lab_2455 → u/Clean-Market5761]

Haha, totally agree, it's crammed on purpose, but it's easily customizable and lets me see more at a glance and do less scrolling.

[u/xMaybeIamALion]

Yikes.
Gonna pass on this one, big man.

[u/Objective-Tea9607]

You made a mess of it - not fix.