diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1464527..bacf059 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -27,6 +28,7 @@ import { Page404Component } from './page404/page404.component';
   imports: [
     SharedModule,
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     HttpClientModule
   ],
diff --git a/src/app/nav/nav.component.html b/src/app/nav/nav.component.html
index cb8f373..4501355 100644
--- a/src/app/nav/nav.component.html
+++ b/src/app/nav/nav.component.html
@@ -1,6 +1,6 @@
 <ul>
-    <li><a routerLink="{{Pages.HOME}}" routerLinkActive="activeRoute">{{Pages.HOME}}</a></li>
-    <li><a routerLink="{{Pages.PROJECTS}}" routerLinkActive="activeRoute">{{Pages.PROJECTS}}</a></li>
+    <li (mouseover)="state[0] = 'bump'" (mouseout)="state[0] = 'norm'"><a [@openClose]="state[0]" routerLink="{{Pages.HOME}}" routerLinkActive="activeRoute">{{Pages.HOME}}</a></li>
+    <li (mouseover)="state[1] = 'bump'" (mouseout)="state[1] = 'norm'"><a [@openClose]="state[1]"  routerLink="{{Pages.PROJECTS}}" routerLinkActive="activeRoute">{{Pages.PROJECTS}}</a></li>
     <!-- <li><a routerLink="{{Pages.GALLERY}}" routerLinkActive="activeRoute">{{Pages.GALLERY}}</a></li> -->
-    <li><a routerLink="{{Pages.LINKS}}" routerLinkActive="activeRoute">{{Pages.LINKS}}</a></li>
+    <li (mouseover)="state[2] = 'bump'" (mouseout)="state[2] = 'norm'"><a [@openClose]="state[2]"  routerLink="{{Pages.LINKS}}" routerLinkActive="activeRoute">{{Pages.LINKS}}</a></li>
 </ul>
\ No newline at end of file
diff --git a/src/app/nav/nav.component.scss b/src/app/nav/nav.component.scss
index 8a044e1..9b344fb 100644
--- a/src/app/nav/nav.component.scss
+++ b/src/app/nav/nav.component.scss
@@ -12,9 +12,12 @@ li {
   border-radius: 50px;
   width: 100px;
   height: 100px;
+  padding-right: 50px;
+  margin-right: -15px;
 }
 
 li a {
+  right: 0;
   border-radius: 50px;
   width: 100px;
   height: 100px;
@@ -31,13 +34,13 @@ li .activeRoute {
   color: colors.$inklets-color-black;
 }
 
-li a:hover {
-  background-color: colors.$inklets-color-highlight-bg;
-  color: colors.$inklets-color-white;
-}
+// li a:hover {
+//   background-color: colors.$inklets-color-highlight-bg;
+//   color: colors.$inklets-color-white;
+// }
 
 
- li a:hover.activeRoute {
-  background-color: colors.$inklets-color-highlight-fg;
-  color: colors.$inklets-color-black;
-}
+//  li a:hover.activeRoute {
+//   background-color: colors.$inklets-color-highlight-fg;
+//   color: colors.$inklets-color-black;
+// }
diff --git a/src/app/nav/nav.component.ts b/src/app/nav/nav.component.ts
index fc97dbd..ffc59fd 100644
--- a/src/app/nav/nav.component.ts
+++ b/src/app/nav/nav.component.ts
@@ -1,18 +1,42 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, OnInit } from '@angular/core';
 import { Pages } from '../shared/models/pages.model';
-import { NavService } from './nav.service';
 
 @Component({
   selector: 'app-nav',
+  animations: [
+      trigger('openClose', [
+          state(
+              'bump',
+              style({
+                  'margin-left': 0
+              })
+          ),
+          state(
+              'norm',
+              style({
+                  'margin-left': '15px'
+              })
+          ),
+          transition('norm => bump', [
+              animate(
+                  '0.1s'
+              )
+          ]),
+          transition('bump => norm', [
+              animate(
+                  '0.1s'
+              )
+          ])
+      ])
+  ],
   templateUrl: './nav.component.html',
   styleUrls: ['./nav.component.scss']
 })
 export class NavComponent implements OnInit {
 
   Pages = Pages;
+  state: string[] = ['norm', 'norm', 'norm'];
 
   constructor() { }