diff --git a/package.json b/package.json
index 935df6d..9c353c9 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"autoprefixer": "^10.4.17",
 		"dayjs": "^1.11.10",
+		"image-js": "^0.35.5",
 		"postcss": "^8.4.33",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
diff --git a/src/lib/components/DropPlaceholder.svelte b/src/lib/components/DropPlaceholder.svelte
new file mode 100644
index 0000000..106e073
--- /dev/null
+++ b/src/lib/components/DropPlaceholder.svelte
@@ -0,0 +1,5 @@
+<div
+	class="absolute left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-blue-300 bg-opacity-50"
+>
+	<p class="text-2xl font-bold text-white">Drop your images here</p>
+</div>
diff --git a/src/lib/components/gallery/ActionButton.svelte b/src/lib/components/gallery/ActionButton.svelte
index 85c4694..d25a962 100644
--- a/src/lib/components/gallery/ActionButton.svelte
+++ b/src/lib/components/gallery/ActionButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { trimString } from '$lib/utils/tools'
 	import type { IconDefinition } from '@fortawesome/free-regular-svg-icons'
 	import Fa from 'svelte-fa'
 
@@ -7,6 +8,8 @@
 	export let text: string = ''
 	export let icon: IconDefinition | null = null
 	export let onClick: Method | null = null
+	export let isActive: string = ''
+	export let borderDown: boolean = false
 
 	let hover = false
 </script>
@@ -14,7 +17,8 @@
 <button
 	on:mouseenter={() => (hover = true)}
 	on:mouseleave={() => (hover = false)}
-	class="flex flex-col items-center gap-3 hover:text-gray-500"
+	class="flex flex-col items-center gap-3 hover:text-gray-500
+	{isActive == trimString(text) && !borderDown ? 'border-l-[3px] border-blue-500' : ''}"
 	on:click={() => (onClick ? onClick() : '')}
 >
 	{#if icon}
@@ -22,4 +26,8 @@
 	{/if}
 
 	<span class="text-sm font-light">{text}</span>
+	<span
+		class="h-[2px] w-[50%]
+	{borderDown && isActive == trimString(text) ? 'border-b-[1.5px] border-blue-500' : ''}"
+	/>
 </button>
diff --git a/src/lib/components/gallery/BlurImagePanel.svelte b/src/lib/components/gallery/BlurImagePanel.svelte
new file mode 100644
index 0000000..e8f6622
--- /dev/null
+++ b/src/lib/components/gallery/BlurImagePanel.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Slider from '$lib/components/ui/slider/slider.svelte'
+
+	let blurValue: number = 0
+	let blur: number[] = [blurValue]
+	export let blurLevel: number = blurValue
+
+	$: blurLevel = blurValue
+</script>
+
+<div class="flex w-56 flex-col gap-3 rounded-xl bg-white px-6 py-5 shadow-lg">
+	<p>Blur</p>
+	<div class="w-full rounded-lg bg-blue-300 px-5 py-1">
+		<Slider
+			bind:value={blur}
+			onValueChange={(e) => (blurValue = e[0])}
+			class="w-80"
+			max={100}
+			min={0}
+			step={5}
+		/>
+	</div>
+</div>
diff --git a/src/lib/components/gallery/Header.svelte b/src/lib/components/gallery/Header.svelte
index 1fd0ab9..f89ee58 100644
--- a/src/lib/components/gallery/Header.svelte
+++ b/src/lib/components/gallery/Header.svelte
@@ -1,17 +1,12 @@
 <script lang="ts">
-	import {
-		faHomeAlt,
-		faInfoCircle,
-		faMultiply,
-		faRedo,
-		faUndo
-	} from '@fortawesome/free-solid-svg-icons'
+	import { faTrashAlt } from '@fortawesome/free-regular-svg-icons'
+	import { faHomeAlt, faInfoCircle, faMultiply } from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
 	import { createEventDispatcher } from 'svelte'
+	import { Undo, Redo, Download } from 'lucide-svelte'
 	import { goto } from '$app/navigation'
 	import type { ImageType } from '$lib/utils/types'
 	import Tooltip from '../elements/Tooltip.svelte'
-	import { faTrashAlt } from '@fortawesome/free-regular-svg-icons'
 
 	export let showInfo = false
 	export let tabs: ImageType[] = []
@@ -59,11 +54,11 @@
 	</div>
 	<div class="flex h-16 bg-blue-400 px-5 text-white">
 		<div class="mx-auto flex w-full max-w-7xl flex-row items-center justify-end gap-4">
-			<button class="h-8">
-				<Fa icon={faUndo} />
+			<button class="h-8" disabled>
+				<Undo />
 			</button>
-			<button class="h-8">
-				<Fa icon={faRedo} />
+			<button class="h-8" disabled>
+				<Redo />
 			</button>
 			<button
 				class="h-8 {showInfo && 'border-b border-white'}"
@@ -79,6 +74,11 @@
 			>
 				<Fa icon={faTrashAlt} />
 			</button>
+			<!-- {#if $galleryStore.isEditing}
+				<button class="h-8">
+					<Download size="18" />
+				</button>
+			{/if} -->
 		</div>
 	</div>
 </div>
diff --git a/src/lib/components/gallery/ImageEditor.svelte b/src/lib/components/gallery/ImageEditor.svelte
index 4162ed1..eef4a6a 100644
--- a/src/lib/components/gallery/ImageEditor.svelte
+++ b/src/lib/components/gallery/ImageEditor.svelte
@@ -1,67 +1,252 @@
 <script lang="ts">
-	import { galleryStore } from '$lib/store'
 	import {
 		faChevronLeft,
 		faChevronRight,
 		faCropSimple,
 		faDroplet,
 		faPaintBrush,
+		faRotate,
 		faRotateLeft,
 		faRotateRight,
 		faT
 	} from '@fortawesome/free-solid-svg-icons'
-
 	import ImageDetails from '$lib/components/gallery/ImageDetails.svelte'
 	import ActionButton from '$lib/components/gallery/ActionButton.svelte'
 	import Fa from 'svelte-fa'
+	import { trimString } from '$lib/utils/tools'
+	import BlurImagePanel from './BlurImagePanel.svelte'
+	import ImageJs, { Image } from 'image-js'
 	import type { ImageType } from '$lib/utils/types'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, onDestroy } from 'svelte'
+
+	const dispatch = createEventDispatcher()
 
+	export let image: ImageType
 	export let showInfo = false
 
-	export let image: ImageType;
+	const ROTATE_90 = 'Rotate 90°'
+	const ROTATE_RIGHT = '90° Right'
+	const ROTATE_LEFT = '90° Left'
+	const BLUR = 'Blur'
+	const BRUSH = 'Brush'
+	const CROP = 'Crop'
+	const TEXT = 'Text'
 
-	const dispatch = createEventDispatcher()
+	let activeAction: string = ''
+	let imageRef: HTMLImageElement | null = null
+	let blurLevel = 0
+	let isEditing = false
+	let rotate = false
+	let rotateValue = 0
+	let imageObj: Image | null = null
+	let editImageRef: ImageType | null
+
+	const loadImage = async () => {
+		if (image?.src) {
+			// Load image with image-js for further other functionality
+			imageObj = await ImageJs.load(image?.src)
+		}
+	}
+
+	if (image?.src) {
+		loadImage()
+	}
+
+	const toggleAction = (active: string) => {
+		if (activeAction == trimString(active)) {
+			activeAction = ''
+			return true
+		}
+		return false
+	}
+
+	const blurImage = () => {
+		if (toggleAction(BLUR)) return
+		activeAction = trimString(BLUR)
+		enableEditing()
+		setBlur()
+	}
+
+	const setBlur = (value?: number) => {
+		if (imageRef) {
+			const bv = blurLevel / 20
+			imageRef.style.filter = `blur(${bv}px)`
+			if (value == 0) {
+				imageRef.style.filter = 'blur(0px)'
+			}
+		}
+	}
+	const rotateLeft = () => {
+		activeAction = trimString(ROTATE_LEFT)
+		if (imageRef) {
+			enableEditing()
+			rotateValue -= 90
+			imageRef.style.transform = `rotate(${rotateValue}deg)`
+			if (Math.abs(rotateValue) == 360) rotateValue = 0
+		}
+	}
+
+	const rotateRight = () => {
+		activeAction = trimString(ROTATE_RIGHT)
+		if (imageRef) {
+			enableEditing()
+			rotateValue += 90
+			imageRef.style.transform = `rotate(${rotateValue}deg)`
+			if (Math.abs(rotateValue) == 360) rotateValue = 0
+		}
+	}
+
+	const brushImage = () => {
+		if (toggleAction(BRUSH)) return
+		activeAction = trimString(BRUSH)
+		enableEditing()
+	}
+
+	const enableEditing = () => {
+		if (imageRef && !isEditing) {
+			isEditing = true
+			editImageRef = image
+		}
+	}
+
+	const resetImage = () => {
+		isEditing = false
+		activeAction = ''
+		editImageRef = null
+		if (imageRef) {
+			rotateValue = 0
+			imageRef.style.filter = `blur(${0}px)`
+			imageRef.style.transform = `rotate(0deg)`
+		}
+	}
+
+	const toggleRotate = () => {
+		rotate = !rotate
+		if (rotate) activeAction = trimString(ROTATE_90)
+		else activeAction = ''
+	}
+
+	$: blurLevel ? setBlur() : setBlur(0)
+	// To handle active rotate state and remove active state on click other operation
+	$: rotate &&
+	![trimString(ROTATE_LEFT), trimString(ROTATE_90), trimString(ROTATE_RIGHT)].includes(activeAction)
+		? (rotate = false)
+		: ''
+
+	onDestroy(() => {
+		resetImage()
+	})
+
+	const applyChanges = () => {
+		// TODO: implement apply image chanages
+		rotate = false
+		activeAction = ''
+		isEditing = false
+	}
+
+	const handleKeyDown = (e: KeyboardEvent) => {
+		if (isEditing || activeAction) return
+		switch (e.code) {
+			case 'ArrowLeft':
+				dispatch('previous')
+				break
+			case 'ArrowRight':
+				dispatch('next')
+				break
+			default:
+				break
+		}
+	}
 </script>
 
 <div class="mx-auto flex h-[75vh] w-full max-w-7xl flex-row gap-6 px-5 py-12">
-	<div class="flex w-36 flex-col gap-6 rounded-xl bg-white py-5 shadow-lg">
-		<ActionButton text="Rotate Left" icon={faRotateLeft} />
-		<ActionButton text="Rotate Right" icon={faRotateRight} />
-		<ActionButton text="Brush" icon={faPaintBrush} />
-		<ActionButton text="Blur" icon={faDroplet} />
-		<ActionButton text="Crop" icon={faCropSimple} />
-		<ActionButton text="Text" icon={faT} />
-	</div>
-
-	<div class="relative h-full max-h-[80vh] w-full">
-		<button
-			on:click={() => {
-				dispatch("previous")
-			}}
-			class="absolute left-5 top-[50%] flex h-10 w-10 items-center rounded-full p-3 text-gray-400 hover:bg-gray-100 hover:bg-opacity-80 hover:text-black"
-		>
-			<Fa icon={faChevronLeft} size="1.6x" />
-		</button>
-		{#if image}
-			<img
-				class="h-full w-full rounded-xl object-contain"
-				src={image.src?.toString()}
-				alt={image.name}
+	<div class="flex w-36 flex-col gap-6 truncate rounded-xl bg-white py-5 shadow-lg">
+		<ActionButton
+			isActive={rotate ? trimString(ROTATE_90) : ''}
+			text={ROTATE_90}
+			icon={faRotate}
+			onClick={() => toggleRotate()}
+		/>
+		{#if rotate}
+			<ActionButton
+				borderDown
+				isActive={activeAction}
+				text={ROTATE_RIGHT}
+				icon={faRotateRight}
+				onClick={() => rotateRight()}
+			/>
+			<ActionButton
+				borderDown
+				isActive={activeAction}
+				text={ROTATE_LEFT}
+				icon={faRotateLeft}
+				onClick={() => rotateLeft()}
 			/>
 		{/if}
+		<ActionButton isActive={activeAction} text={BRUSH} icon={faPaintBrush} />
+		<ActionButton
+			isActive={activeAction}
+			text={BLUR}
+			icon={faDroplet}
+			onClick={() => blurImage()}
+		/>
+		<ActionButton text={CROP} icon={faCropSimple} />
+		<ActionButton text={TEXT} icon={faT} />
+	</div>
 
-		<button
-			on:click={() => {
-				dispatch("next")
-			}}
-			class="absolute right-5 top-[50%] flex h-10 w-10 items-center rounded-full p-3 text-gray-400 hover:bg-gray-100 hover:bg-opacity-80 hover:text-black"
+	<div class="relative flex w-full flex-col">
+		<div class:hidden={!isEditing} class="absolute right-5 top-2 z-10 flex flex-row gap-2">
+			<button
+				on:click={() => resetImage()}
+				class="flex items-center rounded-lg border bg-white px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 hover:text-black"
+			>
+				Reset
+			</button>
+			<button
+				on:click={() => applyChanges()}
+				class="flex items-center rounded-lg bg-blue-400 px-3 py-1 text-sm text-white hover:bg-blue-300"
+			>
+				Apply
+			</button>
+		</div>
+
+		<div
+			class="relative flex max-h-[80vh] w-full justify-center
+		{[90, 270].includes(Math.abs(rotateValue)) && 'top-32 h-[75%]'}"
 		>
-			<Fa icon={faChevronRight} size="1.6x" />
-		</button>
+			<button
+				class:hidden={isEditing}
+				on:click={() => dispatch('previous')}
+				class="absolute left-5 top-[50%] z-10 flex h-10 w-10 items-center rounded-full border p-3 text-gray-400 hover:bg-gray-100 hover:bg-opacity-80 hover:text-black"
+			>
+				<Fa icon={faChevronLeft} size="1.6x" />
+			</button>
+			{#if image}
+				<img
+					bind:this={imageRef}
+					class="rounded-xl object-contain"
+					src={isEditing ? editImageRef?.src?.toString() : image.src?.toString()}
+					alt={image.name}
+				/>
+			{/if}
+
+			<button
+				class:hidden={isEditing}
+				on:click={() => dispatch('next')}
+				class="absolute right-5 top-[50%] flex h-10 w-10 items-center rounded-full border p-3 text-gray-400 hover:bg-gray-100 hover:bg-opacity-80 hover:text-black"
+			>
+				<Fa icon={faChevronRight} size="1.6x" />
+			</button>
+		</div>
 	</div>
 
 	{#if showInfo}
-		<ImageDetails image={image} />
+		<ImageDetails {image} />
+	{/if}
+
+	{#if activeAction == trimString(BLUR)}
+		<BlurImagePanel bind:blurLevel />
 	{/if}
 </div>
+
+<svelte:window on:keydown|preventDefault|stopPropagation={handleKeyDown} />
diff --git a/src/lib/utils/tools.ts b/src/lib/utils/tools.ts
index 01e746b..59155ad 100644
--- a/src/lib/utils/tools.ts
+++ b/src/lib/utils/tools.ts
@@ -85,34 +85,6 @@ export function makeid(length: number) {
 	return str
 }
 
-export const proccessFiles = async (files: File[]) => {
-	return new Promise((resolve) => {
-		const __process = async () => {
-			let images: any[] = []
-
-			files.forEach((file) => {
-				if (file.type && !file.type.startsWith('image/')) {
-					console.error('File is not an image.', file.type, file)
-					return
-				}
-				let reader = new FileReader()
-
-				reader.addEventListener(
-					'load',
-					() => {
-						images.push(reader.result)
-					},
-					false
-				)
-
-				if (file) {
-					reader.readAsDataURL(file)
-				}
-			})
-
-			resolve(images)
-		}
-		__process()
-	})
-	// return images
+export function trimString(str: string) {
+	return str.trim().replaceAll(' ', '').toLowerCase()
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2dff047..828e29b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -12,6 +12,7 @@
 	import { makeid } from '$lib/utils/tools'
 	import { galleryStore } from '$lib/store'
 	import type { ImageType } from '$lib/utils/types'
+	import DropPlaceholder from '$lib/components/DropPlaceholder.svelte'
 
 	let imageDropping = false
 	let deleteModal = false
@@ -179,7 +180,7 @@
 				images = $galleryStore.images.filter((img) => {
 					return selectedTags.every((tag) => img.tags.includes(tag))
 				})
-				
+
 				break
 			default:
 				images = $galleryStore.images
@@ -214,11 +215,7 @@
 
 <div class="flex h-screen w-full flex-col justify-start">
 	{#if imageDropping}
-		<div
-			class="absolute left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-blue-300 bg-opacity-50"
-		>
-			<p class="text-2xl font-bold text-white">Drop your images here</p>
-		</div>
+		<DropPlaceholder />
 	{/if}
 	<div class="mx-auto flex h-full w-full max-w-7xl flex-col justify-start p-5">
 		<Filter bind:sort />