diff --git a/public/assets/css/dash/frame.css b/public/assets/css/dash/frame.css
index 8dca897..51bfa96 100644
--- a/public/assets/css/dash/frame.css
+++ b/public/assets/css/dash/frame.css
@@ -50,13 +50,14 @@ code {
 }
 
 svg[role="icon"] {
+  transition: all 0.3s linear;
   fill: var(--white);
   width: 25px;
   height: 25px;
   padding-top: 5px;
 }
 
-/* HEADER 
+/* HEADER
 	Navigation
 	Notificiations
 */
@@ -123,9 +124,16 @@ header > nav > div.nav-right div.submenu button {
   font-size: 0.8em;
 }
 
-header > nav > div.nav-right div.submenu button[data-render="true"] {
-  background: var(--tertiary);
-  color: var(--primary);
+button[data-render="true"] {
+  background: var(--primary);
+}
+
+button[data-render="true"] svg {
+  fill: var(--highlight);
+}
+
+button[data-render="false"] svg {
+  fill: var(--white);
 }
 
 /* RESPONSIVE */
diff --git a/public/assets/css/dash/index.css b/public/assets/css/dash/index.css
index 61cdad1..81d4c13 100644
--- a/public/assets/css/dash/index.css
+++ b/public/assets/css/dash/index.css
@@ -68,22 +68,22 @@ section[class="index-recent-pages"] button i {
   font-size: 1.8em;
 }
 
-section[class="index-recent-pages"] button[data-active="true"] {
+button[data-active="true"] {
   background: var(--primary);
 }
 
-section[class="index-recent-pages"] button[data-active="true"] i {
-  color: var(--tertiary);
-}
-
-section[class="index-recent-pages"] button[data-active="false"] {
+button[data-active="false"] {
   background: var(--secondary);
 }
 
-section[class="index-recent-pages"] button[data-active="false"] i {
+button[data-active="false"] svg {
   fill: var(--primary);
 }
 
+button[data-active="true"] svg {
+  fill: var(--highlight);
+}
+
 section[class="index-recent-pages"] aside {
   font-size: 1.1em;
   color: var(--white);
diff --git a/public/assets/css/dash/page-editor.css b/public/assets/css/dash/page-editor.css
index 4bc1c09..db05dfa 100644
--- a/public/assets/css/dash/page-editor.css
+++ b/public/assets/css/dash/page-editor.css
@@ -230,35 +230,6 @@ main
   border-radius: 0 3px 3px 0;
 }
 
-main section[role="page-meta"] div[role="page-meta-wrapper"] button[data-active="false"] {
-  background: var(--primary);
-}
-
-main
-  section[role="page-meta"]
-  div[role="page-meta-wrapper"]
-  button[data-active="false"]
-  svg {
-  fill: var(--secondary);
-}
-
-main
-  section[role="page-meta"]
-  div[role="page-meta-wrapper"]
-  div[role="page-options"]
-  button[data-active="true"] {
-  background: var(--tertiary);
-}
-
-main
-  section[role="page-meta"]
-  div[role="page-meta-wrapper"]
-  div[role="page-options"]
-  button[data-active="true"]
-  svg {
-  fill: var(--primary);
-}
-
 main
   section[role="page-meta"]
   div[role="page-meta-wrapper"]
diff --git a/resources/views/includes/nav.blade.php b/resources/views/includes/nav.blade.php
index fd6fa91..f0eeca5 100644
--- a/resources/views/includes/nav.blade.php
+++ b/resources/views/includes/nav.blade.php
@@ -6,17 +6,23 @@
     @endif
     <a id="settings" href="/dashboard/settings" title="settings">
         <button>
-            <i class="ti ti-home-cog"></i>
+            <svg id="nav-settings-icon" role="icon">
+                <use id="nav-settings-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cog"/>
+            </svg>
         </button>
     </a>
     <a id="navigation" href="/dashboard/navigation" title="edit navigation">
         <button>
-            <i class="ti ti-arrow-autofit-height"></i>
+            <svg id="nav-menu-icon" role="icon">
+                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
+            </svg>
         </button>
     </a>
     <a id="navigation" href="/dashboard/logout" title="log out">
         <button>
-            <i class="ti ti-logout"></i>
+            <svg id="nav-logout-icon" role="icon">
+                <use id="nav-logout-icon" xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
+            </svg>
         </button>
     </a>
 </div>
diff --git a/resources/views/includes/options.blade.php b/resources/views/includes/options.blade.php
index 6ae7f64..fed9654 100644
--- a/resources/views/includes/options.blade.php
+++ b/resources/views/includes/options.blade.php
@@ -33,8 +33,8 @@ if(isset($page['uuid']))
 
 <br>
     <button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ $menu }}" title='Pin to Menu'>
-        <svg id="option-page-icon" role="icon">
-            <use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
+        <svg id="option-menu-pin" role="icon">
+            <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>
         </svg>
     </button><button id="option-feature" class="option-inactive post-option-btn" data-active="{{ $featured }}" title='Feature'>
         <svg id="option-feature-icon" role="icon">
diff --git a/resources/views/includes/recent-meta.blade.php b/resources/views/includes/recent-meta.blade.php
index 3b9b58f..6f8caf6 100644
--- a/resources/views/includes/recent-meta.blade.php
+++ b/resources/views/includes/recent-meta.blade.php
@@ -33,14 +33,20 @@ if($page['featured'] == 'true')
     </strong>
     <hr/>
     <button data-active="{{ $menu }}">
-        <i class="ti ti-navigation"></i>
+        <svg id="option-menu-pin" role="icon">
+            <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>
+        </svg>
     </button>
     <button data-active="{{ $published }}">
-        <i class="ti ti-world"></i>
+        <svg id="option-published-icon" role="icon">
+            <use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
+        </svg>
     </button>
 
     <button data-active="{{ $featured }}">
-        <i class="ti ti-star"></i>
+        <svg id="option-feature-icon" role="icon">
+            <use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
+        </svg>
     </button>
 
 </aside>
diff --git a/resources/views/includes/submenu-settings.blade.php b/resources/views/includes/submenu-settings.blade.php
index 59925e2..69555ed 100644
--- a/resources/views/includes/submenu-settings.blade.php
+++ b/resources/views/includes/submenu-settings.blade.php
@@ -1,11 +1,17 @@
 <div class="submenu">
     <button id="save-toggle" title="save settings">
-        <i class="ti ti-device-floppy"></i>
+        <svg id="save-toggle" role="icon">
+            <use id="save-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-save"/>
+        </svg>
     </button>
     <button id="publish-pages" title="publish site">
-        <i class="ti ti-world-upload"></i>
+        <svg id="publish-pages" role="icon">
+            <use id="publish-pages" xlink:href="/assets/images/global/sprite.svg#entypo-publish"/>
+        </svg>
     </button>
     <button id="render-toggle" title="render on save toggle" data-render="{{ $renderOnSave }}">
-        <i class="ti ti-circle-dashed"></i>
+        <svg id="render-toggle" role="icon">
+            <use id="render-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-ccw"/>
+        </svg>
     </button>
 </div>
diff --git a/resources/views/includes/submenu-start.blade.php b/resources/views/includes/submenu-start.blade.php
index aa73905..47959e1 100644
--- a/resources/views/includes/submenu-start.blade.php
+++ b/resources/views/includes/submenu-start.blade.php
@@ -1,12 +1,16 @@
 <div class="submenu">
     <a href='/dashboard/pages' title="view pages">
         <button>
-            <i class="ti ti-book-2"></i>
+            <svg id="option-menu-pin" role="icon">
+                <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-book"/>
+            </svg>
         </button>
     </a>
     <a href='/dashboard/page/add/new' title="add new page">
         <button>
-            <i class="ti ti-square-plus"></i>
+            <svg id="option-menu-pin" role="icon">
+                <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-squared-plus"/>
+            </svg>
         </button>
     </a>
 </div>