diff --git a/src/Const/slide.ts b/src/Const/slide.ts
index 3f97774..8c66187 100644
--- a/src/Const/slide.ts
+++ b/src/Const/slide.ts
@@ -1,2 +1,3 @@
 export const DEFAULT_SLIDE_WIDTH = 960
 export const DEFAULT_SLIDE_HEIGHT = 540
+export const SLIDE_RATIO = DEFAULT_SLIDE_WIDTH / DEFAULT_SLIDE_HEIGHT
diff --git a/src/Kernel/Animation/Animation.ts b/src/Kernel/Animation/Animation.ts
new file mode 100644
index 0000000..f0911d3
--- /dev/null
+++ b/src/Kernel/Animation/Animation.ts
@@ -0,0 +1,14 @@
+import { type Block } from '@BlockHub/Block/Block'
+
+export class Animation {
+  constructor(
+    public type: 'Entrance' | 'Emphasis' | 'Exit',
+    public name: string,
+    public block: Block,
+    public propName: string,
+    public startValue: any,
+    public endValue: any,
+    public duration: number,
+    public delay: number
+  ) {}
+}
diff --git a/src/Kernel/Animation/Timeline.ts b/src/Kernel/Animation/Timeline.ts
new file mode 100644
index 0000000..346eb05
--- /dev/null
+++ b/src/Kernel/Animation/Timeline.ts
@@ -0,0 +1,62 @@
+import { BasicPropName } from '@BlockHub/Block/Block'
+import { Animation } from './Animation'
+
+type TimelineState = 'initial' | 'preview' | 'running'
+
+export class Timeline {
+  private _state: TimelineState = 'initial'
+  private _startTime = 0
+  private _animations: Set<Animation> = new Set()
+  private _previewAnimations: Set<Animation> = new Set()
+  private _runningAnimations: Set<Animation> = new Set()
+
+  private _tick() {
+    const animations = this._state === 'running' ? this._runningAnimations : this._previewAnimations
+    const elapsedTime = Date.now() - this._startTime
+    for (const animation of animations) {
+      const { block, propName, startValue, endValue, duration, delay } = animation
+      let progress
+      if (elapsedTime < delay) {
+        progress = 0
+      } else if (elapsedTime < delay + duration) {
+        // time progress -> effect progress
+        progress = (elapsedTime - delay) / duration
+      } else {
+        progress = 1
+        animations.delete(animation)
+      }
+      block[propName as BasicPropName] = startValue + (endValue - startValue) * progress
+    }
+    if (animations.size > 0) {
+      requestAnimationFrame(this._tick.bind(this))
+    } else {
+      this._state = 'initial'
+    }
+  }
+
+  get animations() {
+    return this._animations
+  }
+
+  add(animation: Animation) {
+    this._animations.add(animation)
+  }
+
+  delete(animation: Animation) {
+    this._animations.delete(animation)
+  }
+
+  preview() {
+    this._state = 'preview'
+    this._previewAnimations = new Set([...this._animations].slice(-1))
+    this._startTime = Date.now()
+    this._tick()
+  }
+
+  start() {
+    this._state = 'running'
+    this._runningAnimations = new Set([...this._animations])
+    this._startTime = Date.now()
+    this._tick()
+  }
+}
diff --git a/src/Kernel/Slide.ts b/src/Kernel/Slide.ts
index 5bb1755..e13eae2 100644
--- a/src/Kernel/Slide.ts
+++ b/src/Kernel/Slide.ts
@@ -2,20 +2,25 @@ import { type Block } from '@BlockHub/Block/Block'
 import { EventManager } from './EventManager'
 import { Command } from '@Kernel/HistoryManager'
 import { history } from '@Kernel/index'
+import { Timeline } from './Animation/Timeline'
+import { Animation } from './Animation/Animation'
 
 export class Slide {
   static id = 0
 
   private _id: number
   private _blocks: Array<Block>
+  private _timeline: Timeline
 
   events = {
     blockChange: new EventManager(),
+    animationChange: new EventManager(),
   }
 
   constructor(blocks: Array<Block> = []) {
     this._id = Slide.id++
     this._blocks = blocks
+    this._timeline = new Timeline()
   }
 
   get id() {
@@ -43,7 +48,7 @@ export class Slide {
   addBlock(block: Block) {
     const command = new Command(
       () => this._addBlock(block),
-      () => this._removeBlock(),
+      () => this._removeBlock()
     )
     history.exec(command)
   }
@@ -55,4 +60,27 @@ export class Slide {
     )
     history.exec(command)
   }
+
+  // Animation
+  get animations() {
+    return this._timeline.animations
+  }
+
+  addAnimation(animation: Animation) {
+    this._timeline.add(animation)
+    this.events.animationChange.emit()
+  }
+
+  deleteAnimation(animation: Animation) {
+    this._timeline.delete(animation)
+    this.events.animationChange.emit()
+  }
+
+  previewAnimation() {
+    this._timeline.preview()
+  }
+
+  startAnimation() {
+    this._timeline.start()
+  }
 }
diff --git a/src/UserInterface/AnimationPane/AnimationPane.vue b/src/UserInterface/AnimationPane/AnimationPane.vue
new file mode 100644
index 0000000..d2aaa1b
--- /dev/null
+++ b/src/UserInterface/AnimationPane/AnimationPane.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { slideManager } from '@Kernel/index'
+import { triggerRef } from 'vue'
+import { shallowRef } from 'vue'
+import { Delete } from '@icon-park/vue-next'
+
+const slide = shallowRef(slideManager.currentSlide)
+const animations = shallowRef(slide.value.animations)
+
+const updateAnimations = () => {
+  slide.value.events.animationChange.on(() => {
+    animations.value = slide.value.animations
+    triggerRef(animations)
+  })
+}
+
+slideManager.events.update.on(() => {
+  slide.value = slideManager.currentSlide
+  updateAnimations()
+})
+updateAnimations()
+</script>
+
+<template>
+  <div
+    class="w-[250px] flex-none flex flex-col gap-[6px] items-center border-l border-secondary-border bg-secondary"
+    v-if="animations.size"
+  >
+    <div class="text-base pt-[10px] pb-[6px]">Animation</div>
+    <div v-for="animation of animations" class="flex flex-col gap-[2px] w-[220px] p-[10px] shadow bg-white">
+      <div class="flex justify-between items-center">
+        <span
+          :style="{
+            color: {
+              Entrance: '#309048FF',
+              Emphasis: '#DE6C00FF',
+              Exit: '#ED3D3BFF',
+            }[animation.type],
+          }"
+          >{{ animation.type }}: {{ animation.name }}</span
+        >
+        <Delete
+          theme="outline"
+          size="24"
+          fill="#333"
+          :strokeWidth="2"
+          class="menu-btn"
+          @click="slide.deleteAnimation(animation)"
+        />
+      </div>
+      <div class="flex justify-between">
+        <span>Duration:</span><input type="number" class="border w-[90px]" v-model="animation.duration" />
+      </div>
+      <div class="flex justify-between">
+        <span>Delay:</span><input type="number" class="border w-[90px]" v-model="animation.delay" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/UserInterface/Present/Present.vue b/src/UserInterface/Present/Present.vue
index b3701d3..566eed8 100644
--- a/src/UserInterface/Present/Present.vue
+++ b/src/UserInterface/Present/Present.vue
@@ -6,6 +6,7 @@ import StatusBar from '../StatusBar/StatusBar.vue'
 import Show from '../Show/Show.vue'
 import { type SlideMode, slideShowMode, history } from '@Kernel/index'
 import { ref, onMounted } from 'vue'
+import AnimationPane from '../AnimationPane/AnimationPane.vue'
 
 const currentMode = ref<SlideMode>('edit')
 slideShowMode.on(async (mode) => {
@@ -33,6 +34,7 @@ onMounted(() => {
     <div class="flex flex-auto slide-area">
       <SlideList />
       <SlideContainer />
+      <AnimationPane />
     </div>
     <StatusBar />
   </div>
diff --git a/src/UserInterface/Show/Show.vue b/src/UserInterface/Show/Show.vue
index 9fc1d3b..ba8dd2d 100644
--- a/src/UserInterface/Show/Show.vue
+++ b/src/UserInterface/Show/Show.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { type SlideMode, slideManager } from '@Kernel/index'
-import { BlockViews } from '@BlockHub/BlockHub'
-import { onMounted, onUnmounted, shallowRef } from 'vue'
+import { onMounted, onUnmounted, ref, shallowRef } from 'vue'
 import { Logout, ArrowCircleLeft, ArrowCircleRight } from '@icon-park/vue-next'
+import Block from './components/Block.vue'
+import { DEFAULT_SLIDE_WIDTH, SLIDE_RATIO } from '@Const/slide'
 
 const { mode } = defineProps<{
   mode: SlideMode
@@ -14,8 +15,9 @@ onMounted(() => {
     slideManager.changeSlide(0)
   }
 })
-slideManager.events.update.on(() => {
+slideManager.events.update.on(async () => {
   slide.value = slideManager.currentSlide
+  slide.value.startAnimation()
 })
 
 const onKeyDown = (event: KeyboardEvent) => {
@@ -36,35 +38,37 @@ onUnmounted(() => {
 const quit = async () => {
   await document.exitFullscreen()
 }
+
+const height = ref(window.innerWidth / SLIDE_RATIO)
+const scale = ref(window.innerWidth / DEFAULT_SLIDE_WIDTH)
+const calcSize = () => {
+  height.value = window.innerWidth / SLIDE_RATIO
+  scale.value = window.innerWidth / DEFAULT_SLIDE_WIDTH
+}
+onMounted(() => {
+  window.addEventListener('resize', calcSize)
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', calcSize)
+})
 </script>
 
 <template>
-  <div class="relative w-screen h-screen" @click="slideManager.goNext">
-    <component
-      v-for="block of slide.blocks"
-      :key="block.id"
-      :is="BlockViews[block.type]"
-      :block="block"
-      :style="{
-        position: 'absolute',
-        left: `${block.x}px`,
-        top: `${block.y}px`,
-        width: `${block.width}px`,
-        height: `${block.height}px`,
-        rotate: `${block.rotate}deg`,
-      }"
-    ></component>
-    <div class="absolute w-full h-full left-0 top-0 opacity-0"></div>
-    <div class="absolute left-[10px] bottom-[10px] flex gap-[10px]">
-      <button class="menu-btn" @click.stop="slideManager.goPrevious">
-        <ArrowCircleLeft theme="two-tone" size="36" :fill="['#333', '#ffffff']" />
-      </button>
-      <button class="menu-btn" @click.stop="slideManager.goNext">
-        <ArrowCircleRight theme="two-tone" size="36" :fill="['#333', '#ffffff']" />
-      </button>
-      <button class="menu-btn" @click.stop="quit">
-        <Logout theme="two-tone" size="36" :fill="['#333', '#ffffff']" />
-      </button>
+  <div class="relative w-screen h-screen bg-black flex items-center" @click="slideManager.goNext">
+    <div class="relative bg-white w-screen overflow-hidden" :style="{ height: `${height}px` }">
+      <Block v-for="block of slide.blocks" :block="block" :scale="scale" />
+      <div class="absolute w-full h-full left-0 top-0 opacity-0"></div>
+      <div class="absolute left-[10px] bottom-[10px] flex gap-[10px]">
+        <button class="menu-btn" @click.stop="slideManager.goPrevious">
+          <ArrowCircleLeft theme="two-tone" size="36" :fill="['#333', '#ffffff']" />
+        </button>
+        <button class="menu-btn" @click.stop="slideManager.goNext">
+          <ArrowCircleRight theme="two-tone" size="36" :fill="['#333', '#ffffff']" />
+        </button>
+        <button class="menu-btn" @click.stop="quit">
+          <Logout theme="two-tone" size="36" :fill="['#333', '#ffffff']" />
+        </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/UserInterface/Show/components/Block.vue b/src/UserInterface/Show/components/Block.vue
new file mode 100644
index 0000000..44d1e79
--- /dev/null
+++ b/src/UserInterface/Show/components/Block.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { BasicPropName, type Block } from '@BlockHub/Block/Block'
+import { BlockViews } from '@BlockHub/BlockHub'
+import { ref } from 'vue'
+
+const { block, scale } = defineProps<{
+  block: Block
+  scale: number
+}>()
+
+const { x, y, width, height, rotate } = block
+const props = ref({ x, y, width, height, rotate })
+block.props.events.update.on(({ key, to }) => {
+  if (['x', 'y', 'width', 'height', 'rotate'].includes(key)) {
+    const name = key as BasicPropName
+    props.value[name] = to as number
+  }
+})
+</script>
+
+<template>
+  <component
+    :key="block.id"
+    :is="BlockViews[block.type]"
+    :block="block"
+    :style="{
+      position: 'absolute',
+      left: `${props.x * scale}px`,
+      top: `${props.y * scale}px`,
+      width: `${props.width * scale}px`,
+      height: `${props.height * scale}px`,
+      rotate: `${props.rotate}deg`,
+    }"
+  ></component>
+</template>
diff --git a/src/UserInterface/Slide/Slide.vue b/src/UserInterface/Slide/Slide.vue
index 827db43..8b55452 100644
--- a/src/UserInterface/Slide/Slide.vue
+++ b/src/UserInterface/Slide/Slide.vue
@@ -48,7 +48,7 @@ toolBox.events.toolChange.on(() => {
 <template>
   <div
     ref="slideRef"
-    class="relative bg-white shadow-lg"
+    class="relative bg-white shadow-lg overflow-hidden"
     :style="{
       width: `${DEFAULT_SLIDE_WIDTH}px`,
       height: `${DEFAULT_SLIDE_HEIGHT}px`,
diff --git a/src/UserInterface/ToolBar/ToolBar.vue b/src/UserInterface/ToolBar/ToolBar.vue
index fa33a6b..9493fb5 100644
--- a/src/UserInterface/ToolBar/ToolBar.vue
+++ b/src/UserInterface/ToolBar/ToolBar.vue
@@ -6,6 +6,7 @@ import Home from './components/Home/Home.vue'
 import Insert from './components/Insert/Insert.vue'
 import Draw from './components/Draw/Draw.vue'
 import SlideShow from './components/SlideShow/SlideShow.vue'
+import Animations from './components/Animations/Animations.vue'
 import { TOOL_TABS } from './const'
 
 const activeTab = ref('Home')
@@ -18,6 +19,7 @@ const components: { [key: string]: Component } = {
   Insert,
   Draw,
   SlideShow,
+  Animations,
 }
 </script>
 
diff --git a/src/UserInterface/ToolBar/components/Animations/Animations.vue b/src/UserInterface/ToolBar/components/Animations/Animations.vue
new file mode 100644
index 0000000..18de9a7
--- /dev/null
+++ b/src/UserInterface/ToolBar/components/Animations/Animations.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Entrance from './components/Entrance.vue'
+import Emphasis from './components/Emphasis.vue'
+import Exit from './components/Exit.vue'
+</script>
+
+<template>
+  <Entrance />
+  <Emphasis />
+  <Exit />
+</template>
diff --git a/src/UserInterface/ToolBar/components/Animations/components/Emphasis.vue b/src/UserInterface/ToolBar/components/Animations/components/Emphasis.vue
new file mode 100644
index 0000000..964879a
--- /dev/null
+++ b/src/UserInterface/ToolBar/components/Animations/components/Emphasis.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import ButtonGroup from '../../ButtonGroup.vue'
+import ToolButton from '../../ToolButton.vue'
+import Spin from './icons/Emphasis/Spin.vue'
+import { selectionManager, slideManager } from '@Kernel/index'
+import { Animation } from '@Kernel/Animation/Animation'
+
+const spin = () => {
+  const blocks = selectionManager.selectedBlocks
+  const slide = slideManager.currentSlide
+  blocks.forEach((block) => {
+    const animation = new Animation('Emphasis', 'Spin', block, 'rotate', block.rotate, block.rotate + 360, 1000, 0)
+    slide.addAnimation(animation)
+  })
+  slide.previewAnimation()
+}
+</script>
+
+<template>
+  <ButtonGroup name="Emphasis">
+    <div class="flex">
+      <ToolButton :clickHandler="spin">
+        <template #icon><Spin /></template>
+        <template #name>Spin</template>
+      </ToolButton>
+    </div>
+  </ButtonGroup>
+</template>
diff --git a/src/UserInterface/ToolBar/components/Animations/components/Entrance.vue b/src/UserInterface/ToolBar/components/Animations/components/Entrance.vue
new file mode 100644
index 0000000..954933d
--- /dev/null
+++ b/src/UserInterface/ToolBar/components/Animations/components/Entrance.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import ButtonGroup from '../../ButtonGroup.vue'
+import ToolButton from '../../ToolButton.vue'
+import FlyIn from './icons/Entrance/FlyIn.vue'
+import { selectionManager, slideManager } from '@Kernel/index'
+import { Animation } from '@Kernel/Animation/Animation'
+import { DEFAULT_SLIDE_HEIGHT } from '@Const/slide'
+
+const flyIn = () => {
+  const blocks = selectionManager.selectedBlocks
+  const slide = slideManager.currentSlide
+  blocks.forEach((block) => {
+    const animation = new Animation('Entrance', 'Fly In', block, 'y', DEFAULT_SLIDE_HEIGHT, block.y, 2000, 0)
+    slide.addAnimation(animation)
+  })
+  slide.previewAnimation()
+}
+</script>
+
+<template>
+  <ButtonGroup name="Entrance">
+    <div class="flex">
+      <ToolButton :clickHandler="flyIn">
+        <template #icon><FlyIn /></template>
+        <template #name>Fly In</template>
+      </ToolButton>
+    </div>
+  </ButtonGroup>
+</template>
diff --git a/src/UserInterface/ToolBar/components/Animations/components/Exit.vue b/src/UserInterface/ToolBar/components/Animations/components/Exit.vue
new file mode 100644
index 0000000..438e106
--- /dev/null
+++ b/src/UserInterface/ToolBar/components/Animations/components/Exit.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { selectionManager, slideManager } from '@Kernel/index'
+import ButtonGroup from '../../ButtonGroup.vue'
+import ToolButton from '../../ToolButton.vue'
+import FlyOut from './icons/Exit/FlyOut.vue'
+import { Animation } from '@Kernel/Animation/Animation'
+import { DEFAULT_SLIDE_WIDTH } from '@Const/slide'
+
+const flyOut = () => {
+  const blocks = selectionManager.selectedBlocks
+  const slide = slideManager.currentSlide
+  blocks.forEach((block) => {
+    const animation = new Animation('Exit', 'Fly Out', block, 'x', block.x, DEFAULT_SLIDE_WIDTH, 1000, 0)
+    slide.addAnimation(animation)
+  })
+  slide.previewAnimation()
+}
+</script>
+
+<template>
+  <ButtonGroup name="Exit">
+    <div class="flex">
+      <ToolButton :clickHandler="flyOut">
+        <template #icon><FlyOut /></template>
+        <template #name>Fly Out</template>
+      </ToolButton>
+    </div>
+  </ButtonGroup>
+</template>
diff --git a/src/UserInterface/ToolBar/components/Animations/components/icons/Emphasis/Spin.vue b/src/UserInterface/ToolBar/components/Animations/components/icons/Emphasis/Spin.vue
new file mode 100644
index 0000000..761d4c3
--- /dev/null
+++ b/src/UserInterface/ToolBar/components/Animations/components/icons/Emphasis/Spin.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg height="36" width="36" viewBox="0,0,2048,2048">
+    <path
+      fill="transparent"
+      d="M 1563 1114 l 323 557 l -645 -218 l -462 495 l 35 -692 l -619 -313 l 662 -154 l 130 -668 l 323 556 l 681 -102 m -505 533 l 354 -445 l -564 83 l -260 -450 l -104 545 l -536 121 l 504 256 l -29 564 l 372 -402 l 523 178 m -1298 -1174 q -80 0 -149 30 q -70 30 -122 82 q -53 53 -83 123 q -30 70 -30 149 q 0 91 40 169 l -48 47 q -27 -48 -41 -102 q -15 -54 -15 -114 q 0 -92 35 -174 q 34 -81 94 -142 q 60 -61 140 -97 q 80 -35 172 -35 h 269 l -274 -275 l 46 -45 l 350 352 l -350 352 l -46 -45 l 274 -275 z"
+    ></path>
+    <path
+      fill="#F8DB8FFF"
+      d="M 846 1237 l -556 -283 l 597 -146 l 118 -595 l 289 500 l 618 -89 l -387 487 l 291 504 l -579 -199 l -421 448 z"
+    ></path>
+    <path
+      fill="#DE6C00FF"
+      d="M 1241 1453 l -462 495 l 35 -692 l -619 -313 l 662 -154 l 130 -668 l 323 556 l 681 -102 l -428 539 l 323 557 m -663 -291 l 523 178 l -260 -450 l 354 -445 l -564 83 l -260 -450 l -104 545 l -536 121 l 504 256 l -29 564 z"
+    ></path>
+    <path
+      fill="#DE6C00FF"
+      d="M 441 320 h 269 l -274 -275 l 46 -45 l 350 352 l -350 352 l -46 -45 l 274 -275 h -262 q -80 0 -149 30 q -70 30 -122 82 q -53 53 -83 123 q -30 70 -30 149 q 0 91 40 169 l -48 47 q -27 -48 -41 -102 q -15 -54 -15 -114 q 0 -92 35 -173 q 34 -81 94 -142 q 60 -60 140 -96 q 80 -35 172 -37 z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/UserInterface/ToolBar/components/Animations/components/icons/Entrance/FlyIn.vue b/src/UserInterface/ToolBar/components/Animations/components/icons/Entrance/FlyIn.vue
new file mode 100644
index 0000000..7cd8e7c
--- /dev/null
+++ b/src/UserInterface/ToolBar/components/Animations/components/icons/Entrance/FlyIn.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg height="36" width="36" viewBox="0,0,2048,2048">
+    <path
+      fill="transparent"
+      d="M 960 1600 h 64 v 448 h -64 m 192 -320 h 64 v 320 h -64 m -384 -320 h 64 v 320 h -64 m 640 -831 l 197 648 l -581 -377 l -581 378 l 198 -650 l -513 -448 h 643 l 253 -640 l 252 640 h 644 m -584 428 l 415 -364 h -519 l -208 -530 l -210 530 h -520 l 419 363 l -163 525 l 474 -308 l 473 307 m -505 -951 l 288 288 l -45 45 l -211 -210 v 517 h -64 v -517 l -211 210 l -45 -45 z"
+    ></path>
+    <path
+      fill="#379E4EFF"
+      d="M 1024 2048 h -64 v -448 h 64 m 192 448 h -64 v -320 h 64 m -384 320 h -64 v -320 h 64 z"
+    ></path>
+    <path
+      fill="#A1DDAAFF"
+      d="M 1024 1450 l -524 340 l 173 -590 l -457 -400 h 578 l 232 -579 l 228 579 h 582 l -462 401 l 177 589 z"
+    ></path>
+    <path
+      fill="#309048FF"
+      d="M 1408 1217 l 197 648 l -581 -377 l -581 378 l 198 -650 l -513 -448 h 643 l 253 -640 l 252 640 h 644 m -584 428 l 415 -364 h -519 l -208 -530 l -210 530 h -520 l 419 363 l -163 525 l 474 -308 l 473 307 z"
+    ></path>
+    <path
+      fill="#FAFAFAFF"
+      d="M 992 768 l 288 288 l -45 45 l -211 -210 v 517 h -64 v -517 l -211 210 l -45 -45 z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/UserInterface/ToolBar/components/Animations/components/icons/Exit/FlyOut.vue b/src/UserInterface/ToolBar/components/Animations/components/icons/Exit/FlyOut.vue
new file mode 100644
index 0000000..b01a2b4
--- /dev/null
+++ b/src/UserInterface/ToolBar/components/Animations/components/icons/Exit/FlyOut.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg height="36" width="36" viewBox="0,0,2048,2048">
+    <path
+      fill="transparent"
+      d="M 1408 1217 l 197 648 l -581 -377 l -581 378 l 198 -650 l -513 -448 h 643 l 253 -640 l 252 640 h 644 m -584 428 l 416 -364 h -520 l -208 -530 l -210 530 h -520 l 420 363 l -164 525 l 474 -308 l 474 307 m -263 -708 l 45 45 l -288 288 l -288 -288 l 45 -45 l 211 210 v -517 h 64 v 517 m 640 -581 h -64 v -448 h 64 m -256 256 h -64 v -384 h 64 m -960 576 h -64 v -448 h 64 m 256 256 h -64 v -384 h 64 z"
+    ></path>
+    <path
+      fill="#ED3D3BFF"
+      d="M 1600 192 h 64 v 448 h -64 m -256 -576 h 64 v 384 h -64 m -896 192 h -64 v -448 h 64 m 256 256 h -64 v -384 h 64 z"
+    ></path>
+    <path
+      fill="#FF9198FF"
+      d="M 1024 1450 l -524 340 l 173 -590 l -457 -400 h 578 l 232 -579 l 228 579 h 582 l -462 401 l 177 589 z"
+    ></path>
+    <path
+      fill="#D42314FF"
+      d="M 1408 1217 l 197 648 l -581 -377 l -581 378 l 198 -650 l -513 -448 h 643 l 253 -640 l 252 640 h 644 m -584 428 l 416 -364 h -520 l -208 -530 l -210 530 h -520 l 420 363 l -164 525 l 474 -308 l 474 307 z"
+    ></path>
+    <path fill="#FAFAFAFF" d="M 704 1056 l 45 -45 l 211 210 v -517 h 64 v 517 l 211 -210 l 45 45 l -288 288 z"></path>
+  </svg>
+</template>
diff --git a/src/UserInterface/ToolBar/components/ToolButton.vue b/src/UserInterface/ToolBar/components/ToolButton.vue
index 109dc74..b32ab84 100644
--- a/src/UserInterface/ToolBar/components/ToolButton.vue
+++ b/src/UserInterface/ToolBar/components/ToolButton.vue
@@ -31,7 +31,7 @@ onUnmounted(() => {
 <template>
   <div class="tool-button relative">
     <button class="menu-btn flex items-center" @click.stop="onClick" :disabled="disabled">
-      <div class="flex flex-col">
+      <div class="flex flex-col items-center">
         <slot name="icon"></slot>
         <span class="text-xs">
           <slot name="name"></slot>
diff --git a/src/UserInterface/ToolBar/const.ts b/src/UserInterface/ToolBar/const.ts
index b7576e3..c1f0217 100644
--- a/src/UserInterface/ToolBar/const.ts
+++ b/src/UserInterface/ToolBar/const.ts
@@ -4,7 +4,7 @@ export const TOOL_TABS: { label: string; value: string }[] = [
   { label: 'ToolBar.draw.text', value: 'Draw' },
   // { label: 'ToolBar.design.text', value: 'Design' },
   // { label: 'ToolBar.transitions.text', value: 'Transitions' },
-  // { label: 'ToolBar.animations.text', value: 'Animations' },
+  { label: 'ToolBar.animations.text', value: 'Animations' },
   { label: 'ToolBar.slideshow.text', value: 'SlideShow' },
   // { label: 'ToolBar.review.text', value: 'Review' },
   // { label: 'ToolBar.view.text', value: 'View' },