diff --git a/components/styles/navbar.tsx b/components/styles/navbar.tsx
index d3642ed..7453992 100644
--- a/components/styles/navbar.tsx
+++ b/components/styles/navbar.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import Link from 'next/link';
 
 interface ActivePropType {
-  active?: false | true;
+  active?: number;
 }
 
 export const NavWrap = styled.div`
diff --git a/components/styles/themedropdown.tsx b/components/styles/themedropdown.tsx
index a11879b..45c7cc7 100644
--- a/components/styles/themedropdown.tsx
+++ b/components/styles/themedropdown.tsx
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
 interface DisplayPropType {
-  show?: false | true;
+  show?: number;
 }
 
 interface ActivePropType {
-  active?: false | true;
+  active?: number;
 }
 
 export const ThemeDropDown = styled.div`
@@ -28,6 +28,7 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
   transition-property: color, border-bottom-left-radius, border-bottom-right-radius;
   transition-timing-function: ease;
   transition-duration: 0.15s;
+  transition-delay: 0, ${ props => props.show ? "0s" : "0.6s" };
 
   &:focus,:hover {
     color: ${({ theme }) => theme.colors.secondary};
@@ -62,6 +63,7 @@ export const ThemeDropDownOptions = styled.div<DisplayPropType>`
 export const ThemeDropDownOption = styled.button<ActivePropType>`
   color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary };
   background-color: ${({ theme }) => theme.colors.background};
+  cursor: pointer;
   align-self: center;
   border: 0px solid;
   padding: 0.2rem 0.5rem;