diff --git a/frontend/src/components/ToolUI.jsx b/frontend/src/components/ToolUI.jsx
index 96ea558..60c39e7 100644
--- a/frontend/src/components/ToolUI.jsx
+++ b/frontend/src/components/ToolUI.jsx
@@ -20,7 +20,6 @@ export function ToolControls({ children, style = {} }) {
     return (
         <div className="controls" style={{
             display: 'flex',
-            alignItems: 'flex-end',
             gap: '1rem',
             flexWrap: 'wrap',
             marginBottom: '1rem',
diff --git a/frontend/src/components/layout/ToolLayoutToggle.jsx b/frontend/src/components/layout/ToolLayoutToggle.jsx
index a651973..97cebd3 100644
--- a/frontend/src/components/layout/ToolLayoutToggle.jsx
+++ b/frontend/src/components/layout/ToolLayoutToggle.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { IconButton } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { SplitScreen, VerticalView } from '@carbon/icons-react';
 import { TOGGLE_POSITIONS } from './constants';
 
 /**
  * Layout toggle button for switching between horizontal and vertical layouts
- * 
+ *
  * @param {Object} props
  * @param {'horizontal'|'vertical'} props.direction - Current layout direction
  * @param {Function} props.onToggle - Callback when toggle is clicked
@@ -13,15 +13,15 @@ import { TOGGLE_POSITIONS } from './constants';
  * @param {boolean} [props.disabled=false] - Whether toggle is disabled
  * @param {Object} [props.style={}] - Additional styles
  */
-export default function ToolLayoutToggle({ 
-    direction, 
-    onToggle, 
+export default function ToolLayoutToggle({
+    direction,
+    onToggle,
     position = 'top-right',
     disabled = false,
     style = {}
 }) {
     const isHorizontal = direction === 'horizontal';
-    
+
     // Position styling based on position prop
     const positionStyles = {
         'top-right': {
@@ -43,25 +43,24 @@ export default function ToolLayoutToggle({
             boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
         }
     };
-    
+
     const containerStyle = {
         ...positionStyles[position] || positionStyles['top-right'],
         ...style
     };
-    
+
     return (
         <div style={containerStyle}>
-            <IconButton
+            <Button
                 kind="ghost"
                 size="sm"
-                label={isHorizontal ? "Switch to vertical layout" : "Switch to horizontal layout"}
+                renderIcon={isHorizontal ? VerticalView : SplitScreen}
                 iconDescription={isHorizontal ? "Vertical layout" : "Horizontal layout"}
-                align="bottom"
+                hasIconOnly
                 disabled={disabled}
                 onClick={onToggle}
-            >
-                {isHorizontal ? <VerticalView size={16} /> : <SplitScreen size={16} />}
-            </IconButton>
+                title={isHorizontal ? "Switch to vertical layout" : "Switch to horizontal layout"}
+            />
         </div>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/pages/ColorConverter.jsx b/frontend/src/pages/ColorConverter.jsx
index 313d14e..b24fd3e 100644
--- a/frontend/src/pages/ColorConverter.jsx
+++ b/frontend/src/pages/ColorConverter.jsx
@@ -455,62 +455,64 @@ export default function ColorConverter() {
     ];
 
     return (
-        <div className="tool-container" style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', height: '100%', overflow: 'hidden' }}>
+        <div className="tool-container" style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', height: '100%' }}>
             <ToolHeader
                 title="Color Converter"
                 description="Pick colors and generate code snippets for multiple programming languages."
             />
 
-            <ToolControls style={{ flexWrap: 'nowrap' }}>
+            <ToolControls style={{ flexWrap: 'wrap', overflow: 'visible' }}>
                 {/* Color Preview & Picker */}
                 <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start', flexWrap: 'nowrap' }}>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-                        <div style={{
-                            width: '80px',
-                            height: '80px',
-                            borderRadius: '8px',
-                            backgroundColor: state.hex,
-                            border: '2px solid var(--cds-border-strong)',
-                            boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
-                            position: 'relative',
-                            overflow: 'hidden'
-                        }}>
-                            <input
-                                type="color"
-                                value={state.hex.startsWith('#') && state.hex.length === 9 ? state.hex.slice(0, 7) : state.hex}
-                                onChange={handleColorPickerChange}
-                                style={{
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    width: '100%',
-                                    height: '100%',
-                                    opacity: 0,
-                                    cursor: 'pointer'
-                                }}
-                            />
-                        </div>
+                    <div style={{
+                        width: '80px',
+                        height: '80px',
+                        borderRadius: '8px',
+                        backgroundColor: state.hex,
+                        border: '2px solid var(--cds-border-strong)',
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
+                        position: 'relative',
+                        overflow: 'hidden'
+                    }}>
+                        <input
+                            type="color"
+                            value={state.hex.startsWith('#') && state.hex.length === 9 ? state.hex.slice(0, 7) : state.hex}
+                            onChange={handleColorPickerChange}
+                            style={{
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                width: '100%',
+                                height: '100%',
+                                opacity: 0,
+                                cursor: 'pointer'
+                            }}
+                        />
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'stretch' }}>
                         <Button
                             size="sm"
                             kind="secondary"
                             renderIcon={ColorPalette}
                             onClick={generateRandomColor}
+                            style={{ minWidth: '150px' }}
                         >
                             Random
                         </Button>
-                    </div>
 
-                    {eyedropperSupported && (
-                        <Button
-                            size="sm"
-                            kind="primary"
-                            renderIcon={Eyedropper}
-                            onClick={openEyeDropper}
-                            disabled={isPicking}
-                        >
-                            {isPicking ? 'Picking...' : 'Pick Color'}
-                        </Button>
-                    )}
+                        {eyedropperSupported && (
+                            <Button
+                                size="sm"
+                                kind="primary"
+                                renderIcon={Eyedropper}
+                                onClick={openEyeDropper}
+                                disabled={isPicking}
+                                style={{ minWidth: '150px' }}
+                            >
+                                {isPicking ? 'Picking...' : 'Pick Color'}
+                            </Button>
+                        )}
+                    </div>
                 </div>
 
                 {/* Input Controls */}
@@ -520,6 +522,8 @@ export default function ColorConverter() {
                         <label style={{ fontSize: '0.75rem', color: 'var(--cds-text-secondary)' }}>HEX</label>
                         <TextInput
                             id="hex-input"
+                            labelText=""
+                            hideLabel={true}
                             value={hexInput}
                             onChange={(e) => handleHexChange(e.target.value)}
                             onBlur={handleHexBlur}
@@ -533,48 +537,48 @@ export default function ColorConverter() {
 
                     {/* RGB Inputs */}
                     <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-end' }}>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', width: '100px' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
                             <label style={{ fontSize: '0.75rem', color: 'var(--cds-text-secondary)' }}>R</label>
                             <NumberInput
                                 id="rgb-r"
-                                min="0"
-                                max="255"
+                                min={0}
+                                max={255}
                                 value={rgbInputs.r}
-                                onChange={(e) => handleRgbChange('r', e.target.value)}
+                                onChange={(e, { value }) => handleRgbChange('r', value)}
                                 size="sm"
                             />
                         </div>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', width: '100px' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
                             <label style={{ fontSize: '0.75rem', color: 'var(--cds-text-secondary)' }}>G</label>
                             <NumberInput
                                 id="rgb-g"
-                                min="0"
-                                max="255"
+                                min={0}
+                                max={255}
                                 value={rgbInputs.g}
-                                onChange={(e) => handleRgbChange('g', e.target.value)}
+                                onChange={(e, { value }) => handleRgbChange('g', value)}
                                 size="sm"
                             />
                         </div>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', width: '100px' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
                             <label style={{ fontSize: '0.75rem', color: 'var(--cds-text-secondary)' }}>B</label>
                             <NumberInput
                                 id="rgb-b"
-                                min="0"
-                                max="255"
+                                min={0}
+                                max={255}
                                 value={rgbInputs.b}
-                                onChange={(e) => handleRgbChange('b', e.target.value)}
+                                onChange={(e, { value }) => handleRgbChange('b', value)}
                                 size="sm"
                             />
                         </div>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', width: '100px' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
                             <label style={{ fontSize: '0.75rem', color: 'var(--cds-text-secondary)' }}>A</label>
                             <NumberInput
                                 id="rgb-a"
-                                min="0"
-                                max="1"
-                                step="0.1"
+                                min={0}
+                                max={1}
+                                step={0.1}
                                 value={rgbInputs.a}
-                                onChange={(e) => handleRgbChange('a', e.target.value)}
+                                onChange={(e, { value }) => handleRgbChange('a', value)}
                                 size="sm"
                             />
                         </div>
@@ -582,52 +586,54 @@ export default function ColorConverter() {
 
                     {/* HSL Inputs */}
                     <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-end' }}>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', width: '100px' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
                             <label style={{ fontSize: '0.75rem', color: 'var(--cds-text-secondary)' }}>H</label>
                             <NumberInput
                                 id="hsl-h"
-                                min="0"
-                                max="360"
+                                min={0}
+                                max={360}
                                 value={hslInputs.h}
-                                onChange={(e) => handleHslChange('h', e.target.value)}
+                                onChange={(e, { value }) => handleHslChange('h', value)}
                                 size="sm"
                             />
                         </div>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', width: '100px' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
                             <label style={{ fontSize: '0.75rem', color: 'var(--cds-text-secondary)' }}>S%</label>
                             <NumberInput
                                 id="hsl-s"
-                                min="0"
-                                max="100"
+                                min={0}
+                                max={100}
                                 value={hslInputs.s}
-                                onChange={(e) => handleHslChange('s', e.target.value)}
+                                onChange={(e, { value }) => handleHslChange('s', value)}
                                 size="sm"
                             />
                         </div>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', width: '100px' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
                             <label style={{ fontSize: '0.75rem', color: 'var(--cds-text-secondary)' }}>L%</label>
                             <NumberInput
                                 id="hsl-l"
-                                min="0"
-                                max="100"
+                                min={0}
+                                max={100}
                                 value={hslInputs.l}
-                                onChange={(e) => handleHslChange('l', e.target.value)}
+                                onChange={(e, { value }) => handleHslChange('l', value)}
                                 size="sm"
                             />
                         </div>
                     </div>
                 </div>
 
-                {/* Layout Toggle */}
-                <div style={{ marginLeft: 'auto', paddingBottom: '4px' }}>
-                    <ToolLayoutToggle
-                        direction={layout.direction}
-                        onToggle={layout.toggleDirection}
-                        position="controls"
-                    />
-                </div>
             </ToolControls>
 
+            {/* Layout Toggle - Moved outside ToolControls */}
+            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '0.5rem' }}>
+                <ToolLayoutToggle
+                    direction={layout.direction}
+                    onToggle={layout.toggleDirection}
+                    position="top-right"
+                    style={{ position: 'relative' }}
+                />
+            </div>
+
             {/* Format Values */}
             <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', marginBottom: '1rem', alignItems: 'center' }}>
                 <div style={{
@@ -745,75 +751,13 @@ export default function ColorConverter() {
                 minHeight: 0,
                 flexDirection: layout.direction === 'horizontal' ? 'row' : 'column'
             }}>
-                {/* Color History */}
-                {state.history.length > 0 && (
-                    <div style={{
-                        width: layout.direction === 'horizontal' ? '200px' : '100%',
-                        minWidth: layout.direction === 'horizontal' ? '200px' : 'auto',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        border: '1px solid var(--cds-border-strong)',
-                        overflow: 'hidden'
-                    }}>
-                        <div style={{
-                            padding: '0.75rem',
-                            backgroundColor: 'var(--cds-layer)',
-                            borderBottom: '1px solid var(--cds-border-strong)',
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center'
-                        }}>
-                            <span style={{ fontSize: '0.875rem', fontWeight: 600 }}>History</span>
-                            <Button
-                                hasIconOnly
-                                renderIcon={TrashCan}
-                                kind="ghost"
-                                size="sm"
-                                onClick={() => dispatch({ type: 'CLEAR_HISTORY' })}
-                                iconDescription="Clear history"
-                            />
-                        </div>
-                        <div style={{
-                            height: '350px',
-                            overflowY: 'auto',
-                            padding: '0.5rem'
-                        }}>
-                            {state.history.map((item, idx) => (
-                                <div
-                                    key={idx}
-                                    onClick={() => loadFromHistory(item)}
-                                    style={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        gap: '0.5rem',
-                                        padding: '0.5rem',
-                                        cursor: 'pointer',
-                                        borderRadius: '4px',
-                                        marginBottom: '0.25rem',
-                                        backgroundColor: 'var(--cds-layer-hover)'
-                                    }}
-                                >
-                                    <div style={{
-                                        width: '24px',
-                                        height: '24px',
-                                        borderRadius: '4px',
-                                        backgroundColor: item.hex,
-                                        border: '1px solid var(--cds-border-strong)'
-                                    }} />
-                                    <span style={{
-                                        fontFamily: "'IBM Plex Mono', monospace",
-                                        fontSize: '0.75rem'
-                                    }}>
-                                        {item.hex}
-                                    </span>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                )}
-
-                {/* Code Snippets */}
-                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+                {/* Code Snippets - 70% */}
+                <div style={{
+                    flex: layout.direction === 'horizontal' ? '0 0 70%' : '1',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: 0
+                }}>
                     <Tabs
                         selectedIndex={state.selectedTab}
                         onChange={({ selectedIndex }) => dispatch({ type: 'SET_SELECTED_TAB', payload: selectedIndex })}
@@ -828,13 +772,25 @@ export default function ColorConverter() {
                                 <TabPanel key={tab.id} style={{ padding: '1rem 0', height: '350px', overflow: 'auto' }}>
                                     <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
                                         {(codeSnippets[tab.id] || []).map((snippet, idx) => (
-                                            <Tile key={idx} style={{ padding: '1rem' }}>
+                                            <Tile key={idx} style={{
+                                                padding: '1rem',
+                                                backgroundColor: idx % 2 === 0 ? 'var(--cds-layer)' : 'var(--cds-layer-hover)'
+                                            }}>
                                                 <div style={{
                                                     display: 'flex',
                                                     justifyContent: 'space-between',
                                                     alignItems: 'flex-start',
-                                                    gap: '1rem'
+                                                    gap: '1rem',
+                                                    overflow: 'hidden'
                                                 }}>
+                                                    <Button
+                                                        hasIconOnly
+                                                        renderIcon={Copy}
+                                                        kind="ghost"
+                                                        size="sm"
+                                                        onClick={() => copyToClipboard(snippet.code)}
+                                                        iconDescription="Copy"
+                                                    />
                                                     <div style={{ flex: 1 }}>
                                                         <div style={{
                                                             fontSize: '0.75rem',
@@ -857,14 +813,6 @@ export default function ColorConverter() {
                                                             {snippet.code}
                                                         </pre>
                                                     </div>
-                                                    <Button
-                                                        hasIconOnly
-                                                        renderIcon={Copy}
-                                                        kind="ghost"
-                                                        size="sm"
-                                                        onClick={() => copyToClipboard(snippet.code)}
-                                                        iconDescription="Copy"
-                                                    />
                                                 </div>
                                             </Tile>
                                         ))}
@@ -874,6 +822,81 @@ export default function ColorConverter() {
                         </TabPanels>
                     </Tabs>
                 </div>
+
+                {/* Color History - 30% */}
+                <div style={{
+                    flex: layout.direction === 'horizontal' ? '0 0 29%' : '1',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    border: '.5px solid var(--cds-border-strong)',
+                    overflow: 'hidden'
+                }}>
+                    <div style={{
+                        padding: '0.75rem',
+                        backgroundColor: 'var(--cds-layer)',
+                        borderBottom: '.5px solid var(--cds-border-strong)',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center'
+                    }}>
+                        <span style={{ fontSize: '0.875rem', fontWeight: 600 }}>History</span>
+                        <Button
+                            hasIconOnly
+                            renderIcon={TrashCan}
+                            kind="ghost"
+                            size="sm"
+                            onClick={() => dispatch({ type: 'CLEAR_HISTORY' })}
+                            iconDescription="Clear history"
+                        />
+                    </div>
+                    <div style={{
+                        flex: 1,
+                        overflowY: 'auto',
+                        padding: '0.5rem'
+                    }}>
+                        {state.history.length === 0 ? (
+                            <div style={{
+                                textAlign: 'center',
+                                padding: '2rem 1rem',
+                                color: 'var(--cds-text-secondary)',
+                                fontSize: '0.875rem'
+                            }}>
+                                No colors in history
+                            </div>
+                        ) : (
+                            state.history.map((item, idx) => (
+                                <div
+                                    key={idx}
+                                    onClick={() => loadFromHistory(item)}
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '0.5rem',
+                                        padding: '0.5rem',
+                                        cursor: 'pointer',
+                                        borderRadius: '4px',
+                                        marginBottom: '0.25rem',
+                                        backgroundColor: 'var(--cds-layer-hover)'
+                                    }}
+                                >
+                                    <div style={{
+                                        width: '24px',
+                                        height: '24px',
+                                        borderRadius: '4px',
+                                        backgroundColor: item.hex,
+                                        border: '1px solid var(--cds-border-strong)'
+                                    }} />
+                                    <span style={{
+                                        fontFamily: "'IBM Plex Mono', monospace",
+                                        fontSize: '0.75rem'
+                                    }}>
+                                        {item.hex}
+                                    </span>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </div>
             </div>
         </div>
     );
diff --git a/frontend/src/pages/DateTimeConverter/index.jsx b/frontend/src/pages/DateTimeConverter/index.jsx
index 61ab2a7..cb6d455 100644
--- a/frontend/src/pages/DateTimeConverter/index.jsx
+++ b/frontend/src/pages/DateTimeConverter/index.jsx
@@ -221,7 +221,7 @@ export default function DateTimeConverter() {
     };
 
     return (
-        <div className="tool-container" style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', height: '100%', overflow: 'auto' }}>
+        <div className="tool-container" style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', height: '100%' }}>
             <ToolHeader
                 title="DateTime Converter"
                 description="Convert between timestamps and date formats. Supports Unix timestamps, ISO dates, and various formats."
diff --git a/vite.config.js b/vite.config.js
index 0d0b508..6ce8f76 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import wails from "@wailsio/runtime/plugins/vite";
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,8 +11,23 @@ export default defineConfig({
       scss: {
         // Suppress expected carbon-design-system deprecation warnings
         // until the library updates its internal Sass usage
-        silenceDeprecations: ['legacy-js-api', 'import', 'global-builtin', 'if-function', 'mixed-decls', 'color-functions']
+        silenceDeprecations: ['modern', 'import', 'global-builtin', 'if-function', 'mixed-decls', 'color-functions'],
+        // Handle ~@ibm/plex/... imports from Carbon
+        importer: [
+          (url) => {
+            if (url.startsWith('~')) {
+              return { file: url.substring(1) };
+            }
+            return null;
+          }
+        ]
       }
     }
+  },
+  resolve: {
+    alias: {
+      // Ensure @ibm/plex can be resolved
+      '@ibm/plex': path.resolve(__dirname, 'node_modules/@ibm/plex')
+    }
   }
 })
\ No newline at end of file