diff --git a/components/Link.tsx b/components/Link.tsx
index c68c53dd..50aac79f 100644
--- a/components/Link.tsx
+++ b/components/Link.tsx
@@ -14,4 +14,26 @@ const StyledLink = styled('a')`
`}
`;
+export const StyledLinkAsButton = styled(StyledLink)`
+ ${({ theme }: { theme: typeof defaultTheme }) => css`
+ color: ${theme.colors.white};
+ background-color: ${theme.colors.accent};
+ ${theme.typography.subheading2};
+ line-height: 24px;
+ border-radius: 5px;
+ border: 1px solid ${theme.colors.accent};
+ padding: 6px 15px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ position: relative;
+ text-decoration: none;
+ &:hover {
+ background-color: ${theme.colors.accent_dark};
+ color: ${theme.colors.white};
+ }
+ `}
+`;
+
export default StyledLink;
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 62e4e583..d1fbd163 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -1,37 +1,14 @@
-import React, { useState } from 'react';
+import React from 'react';
import { css } from '@emotion/core';
import UserDropdown from './UserDropdown';
import defaultTheme from './theme';
import { OvertureLogo } from './theme/icons';
-
-const LoginButton = ({ onClick }: { onClick?: () => any }) => {
- return (
-
- );
-};
+import useAuthContext from '../global/hooks/useAuthContext';
+import { StyledLinkAsButton } from './Link';
const NavBar: React.ComponentType