diff --git a/modules/colorset-creator/modal/index.tsx b/modules/colorset-creator/modal/index.tsx
index 967c5ae..49f3727 100644
--- a/modules/colorset-creator/modal/index.tsx
+++ b/modules/colorset-creator/modal/index.tsx
@@ -35,7 +35,7 @@ export default function ModalContent() {
 	const selectedEntity = entities.includes(_selectedEntity) ? _selectedEntity : getDefaultEntity();
 
 	return (
-		<div className="palette-manager-modal flex gap-[var(--gap-primary)]">
+		<div className="palette-manager-modal flex gap-[var(--gap-primary)] h-[66vh]">
 			<ModalSidebar
 				entities={entities}
 				updatePalettes={updateEntities}
@@ -119,7 +119,7 @@ const ModalSidebar = <E extends typeof PaletteManager | typeof ConfigletManager>
 
 	return (
 		<div className="palette-manager-modal__sidebar w-48 bg-neutral-900">
-			<ul className="flex flex-col">
+			<ul className="flex flex-col h-full">
 				<EntityTypeSelector entityManager={entityManager} nextEntityManager={nextEntityManager} />
 				{searchbar}
 				<div className="palette-manager-modal__btn-new mt-1">
@@ -157,18 +157,20 @@ export const EntityComponent = <E extends typeof PaletteManager | typeof Configl
 	{ entity, entitiesUpdated, enitityManager }: EntityComponentProps<E>,
 ) => {
 	return (
-		<div className="palette-manager-modal__entity flex-grow h-[45vh] gap-[var(--gap-primary)] flex flex-col text-sm bg-neutral-900 rounded-[var(--border-radius)]">
+		<div className="palette-manager-modal__entity flex-grow gap-[var(--gap-primary)] flex flex-col text-sm bg-neutral-900 rounded-[var(--border-radius)]">
 			<EntityInfo
 				entity={entity}
 				entitiesUpdated={entitiesUpdated}
 				enitityManager={enitityManager}
 			/>
-			{enitityManager instanceof PaletteManager && (
-				<PaletteColorSets palette={entity as Palette} paletteManager={enitityManager} />
-			)}
-			{enitityManager instanceof ConfigletManager && (
-				<ConfigletSlateDocument configlet={entity as Configlet} configletManager={enitityManager} />
-			)}
+			<div className="overflow-y-auto h-full">
+				{enitityManager instanceof PaletteManager && (
+					<PaletteColorSets palette={entity as Palette} paletteManager={enitityManager} />
+				)}
+				{enitityManager instanceof ConfigletManager && (
+					<ConfigletSlateDocument configlet={entity as Configlet} configletManager={enitityManager} />
+				)}
+			</div>
 		</div>
 	);
 };
diff --git a/modules/colorset-creator/modal/palette.tsx b/modules/colorset-creator/modal/palette.tsx
index c7ce506..fdd6d04 100644
--- a/modules/colorset-creator/modal/palette.tsx
+++ b/modules/colorset-creator/modal/palette.tsx
@@ -11,7 +11,7 @@ export interface PaletteColorSetsProps {
 }
 export const PaletteColorSets = ({ palette, paletteManager }: PaletteColorSetsProps) => {
 	return (
-		<div className="palette__color-sets bg-[var(--secondary-bg)] p-[var(--gap-primary)] rounded-[var(--border-radius)] flex flex-col flex-nowrap overflow-y-auto h-[calc(100%-40px)] gap-y-1 gap-x-[var(--gap-secondary)]">
+		<div className="palette__color-sets bg-[var(--secondary-bg)] p-[var(--gap-primary)] rounded-[var(--border-radius)] flex flex-col flex-nowrap overflow-y-auto gap-y-1 gap-x-[var(--gap-secondary)]">
 			{Object.entries(palette.data.getColors()).map(([set, colors]) => (
 				<PaletteColorSet
 					key={set}
diff --git a/modules/colorset-creator/slate/code-hightlighting.tsx b/modules/colorset-creator/slate/code-hightlighting.tsx
index 92b20c6..3384bf9 100644
--- a/modules/colorset-creator/slate/code-hightlighting.tsx
+++ b/modules/colorset-creator/slate/code-hightlighting.tsx
@@ -33,7 +33,6 @@ const CodeHighlightingExample = () => {
 
 	return (
 		<Slate editor={editor} initialValue={initialValue}>
-			<ExampleToolbar />
 			<SetNodeToDecorations />
 			<Editable
 				decorate={decorate}
@@ -91,46 +90,6 @@ const ElementWrapper = (props: RenderElementProps) => {
 	);
 };
 
-const ExampleToolbar = () => {
-	return (
-		<Toolbar>
-			<CodeBlockButton />
-		</Toolbar>
-	);
-};
-
-const CodeBlockButton = () => {
-	const editor = useSlateStatic();
-	const handleClick = () => {
-		Transforms.wrapNodes(
-			editor,
-			{ type: CodeBlockType, language: "html", children: [] },
-			{
-				match: (n) => Element.isElement(n) && n.type === ParagraphType,
-				split: true,
-			},
-		);
-		Transforms.setNodes<CodeLineElement>(
-			editor,
-			{ type: CodeLineType },
-			{ match: (n) => Element.isElement(n) && n.type === ParagraphType },
-		);
-	};
-
-	return (
-		<Button
-			data-test-id="code-block-button"
-			active
-			onMouseDown={(event: React.MouseEvent) => {
-				event.preventDefault();
-				handleClick();
-			}}
-		>
-			<Icon>code</Icon>
-		</Button>
-	);
-};
-
 const renderLeaf = (props: RenderLeafProps) => {
 	const { attributes, children, leaf } = props;
 	const { text, ...rest } = leaf;
diff --git a/modules/colorset-creator/slate/components.tsx b/modules/colorset-creator/slate/components.tsx
index 7b1aaa7..d8d7202 100644
--- a/modules/colorset-creator/slate/components.tsx
+++ b/modules/colorset-creator/slate/components.tsx
@@ -7,7 +7,6 @@ interface BaseProps {
 	className: string;
 	[key: string]: unknown;
 }
-type OrNull<T> = T | null;
 
 export const Button = React.forwardRef(
 	(