diff --git a/components/activelink.tsx b/components/activelink.tsx
new file mode 100644
index 0000000..164c876
--- /dev/null
+++ b/components/activelink.tsx
@@ -0,0 +1,21 @@
+import { useRouter } from "next/router"
+import { ReactNode } from "react"
+import Link from "next/link"
+import styled, {css} from "styled-components"
+
+
+const ALink = styled.a<{active?: boolean}>`
+	border-bottom: 1px solid transparent;
+	${({active}) => active && css`
+		border-bottom-color: currentColor;
+	`}
+`
+
+export default ({children, href}: {children: ReactNode, href: string}) => {
+	const router = useRouter()
+	return (
+		<Link href={href} passHref>
+			<ALink active={router.asPath === href}>{children}</ALink>
+		</Link>
+	)
+}
diff --git a/components/header.tsx b/components/header.tsx
index 1f067c7..5dc92c5 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components'
 import Nav from './nav'
+import Link from "next/link"
 
 const Header = styled.header`
 	display: flex;
@@ -10,6 +11,10 @@ const Header = styled.header`
 
 	h1 {
 		font-weight: normal;
+
+		a {
+			color: inherit;
+		}
 	}
 
 	nav {
@@ -21,7 +26,7 @@ const Header = styled.header`
 export default () => {
 	return (
 		<Header>
-			<h1>wych.dev</h1>
+			<h1><Link href="/">wych.dev</Link></h1>
 			<Nav />
 		</Header>
 	)
diff --git a/components/nav.tsx b/components/nav.tsx
index 8d62eb4..d871668 100644
--- a/components/nav.tsx
+++ b/components/nav.tsx
@@ -1,5 +1,5 @@
-import Link from "next/link"
 import styled from 'styled-components'
+import ActiveLink from './activelink'
 
 const Nav = styled.nav`
 	display: flex;
@@ -9,7 +9,7 @@ const Nav = styled.nav`
 
 	a {
 		color: var(--fg-button);
-		transition: .2s opacity;
+		transition: var(--trans-time) opacity;
 	}
 
 	a:hover {
@@ -20,8 +20,8 @@ const Nav = styled.nav`
 export default () => {
 	return (
 		<Nav>
-			<Link href="/">Home</Link>
-			<Link href="/projects">Projects</Link>
+			<ActiveLink href="/">Home</ActiveLink>
+			<ActiveLink href="/projects">Projects</ActiveLink>
 			<a href="https://github.com/E-Almqvist" target="_blank">GitHub</a>
 		</Nav>
 	)
diff --git a/package.json b/package.json
index 246d61f..7617fa7 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "classnames": "^2.3.1",
     "next": "12.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index aa42bfa..cd1b9fa 100755
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
-import type { ReactElement, ReactNode } from 'react'
-import type { NextPage } from 'next'
+import "../styles/globals.css"
+import type { AppProps } from "next/app"
+import type { ReactElement, ReactNode } from "react"
+import type { NextPage } from "next"
 
 export type NextPageWithLayout = NextPage & {
 	getLayout?: (page: ReactElement) => ReactNode
diff --git a/pages/index.tsx b/pages/index.tsx
index 520e8c8..902fa15 100755
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,34 +2,67 @@ import type {NextPageWithLayout} from './_app'
 import type { ReactElement } from 'react'
 import Layout from '../components/layout'
 import styled from 'styled-components'
+import Link from "next/link"
 
 const Section = styled.section`
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
-	padding: 4rem 1rem;
+	padding: 0 1rem;
+	margin: 2rem 0;
 
 	h2 {
-		font-size: 2rem;
+		margin: 8px 0;
 	}
 
 	p {
+		margin: 0;
 		color: var(--fg);
 	}
 `
 
+const Code = styled.code`
+	background-color: var(--bg-dark);
+	color: var(--fg-code);
+	border-radius: .4rem;
+	padding: .1rem .4rem;
+`
+
+const CList = styled.code`
+	list-style: none;
+
+	li {
+		margin: 1rem;
+	}
+`
+
 const Page: NextPageWithLayout = () => {
 	return (
 		<>
 			<Section>
 				<h2 id="about">About</h2>
 				<p>I am a student with a passion for programming, physics, mathematics and *NIX (Linux, UNIX etc). </p>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit ligula, congue in nunc nec, aliquam rutrum massa. Aliquam pharetra, dui nec tincidunt feugiat, lacus metus dignissim augue, et lobortis nisi nisi vitae sapien. Sed consequat nisl quis tincidunt vulputate. Proin sem lectus, consequat imperdiet iaculis vel, tempus vitae enim. Pellentesque ullamcorper, arcu ut dignissim tincidunt, odio quam dignissim nisi, ut tempor dolor tortor at dui. Mauris porta velit est, sed condimentum nunc facilisis nec. Integer porta urna ac semper mattis. Cras vitae enim vitae urna tristique laoreet. Suspendisse justo diam, euismod pellentesque urna id, vestibulum sagittis diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ut ante ac nibh dapibus egestas. Pellentesque id tellus sit amet diam aliquam pellentesque a sit amet enim. Phasellus vel luctus tortor. In orci erat, mattis tempor tellus ac, porta euismod erat. Praesent non vestibulum mauris, vitae commodo ante. Curabitur ut turpis nec arcu scelerisque viverra. </p>
+			</Section>
+
+			<Section>
+				<h2 id="contact">Contact</h2>
+				<p>You can contact me through email. And if you prefer it, you can contact me using PGP. Do note that my <em>email address below is encrypted</em> as a precaution for bots et cetera. Do not worry, it is easy to crack. Alternatively you could search for my PGP fingerprint on some key server (i.e. <a href="https://pgp.mit.edu/" target="_blank">MIT</a>, <a href="https://keyserver.ubuntu.com/" target="_blank">Ubuntu</a>) as my email is "connected" to it.</p>
+				<CList>
+					<li>
+						PGP Fingerprint: <Code>68B2976849F03C7238AEB081E31A99CE3E75A158</Code>
+					</li>
+					<li>
+						Email: <Code>cnlueXpkaXZmZ0B0em52eS5wYnoK</Code>
+					</li>
+					<li>
+						GitHub: <a href="https://github.com/E-Almqvist" target="_blank">github.com/E-Almqvist</a>
+					</li>
+				</CList>
 			</Section>
 
 			<Section>
 				<h2>Projects</h2>
-				<p>Check out my past projects bla bla</p>
+				<p>Most of my projects are open-source, and if you are interested, you can find all of my projects on my <a href="https://github.com/E-Almqvist">GitHub</a>. You can also check out <Link href="/projects">/projects</Link> to view all of my projects (including hardware projects and so on).</p>
 			</Section>
 		</>
 	)
diff --git a/pages/projects.tsx b/pages/projects.tsx
new file mode 100644
index 0000000..be2f375
--- /dev/null
+++ b/pages/projects.tsx
@@ -0,0 +1,16 @@
+import type {NextPageWithLayout} from './_app'
+import type { ReactElement } from 'react'
+import Layout from '../components/layout'
+
+const Page: NextPageWithLayout = () => {
+	return (
+		<>
+			<h1>yo, projects here</h1>
+		</>
+	)
+}
+
+Page.getLayout = (page: ReactElement) => {
+	return <Layout>{page}</Layout>
+}
+export default Page
diff --git a/styles/globals.css b/styles/globals.css
index 92bcccd..6dd06d1 100755
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -10,13 +10,17 @@
 	--v-uni-padding: .2rem;
 
 	--fg: #bbc2cf;
+	color: var(--fg);
 	--fg-emph: #fff;
 	--fg-faded: #aaa;
 	--fg-button: var(--fg-faded);
 	--fg-link: #abf;
+	--fg-code: #ffbe85;
 
 	--bg: #272a34;
-	color: var(--fg);
+	--bg-dark: #161f27; 
+
+	--trans-time: .2s;
 }
 
 * {
@@ -40,13 +44,14 @@ body {
 a {
 	color: var(--fg-link);
 	text-decoration: none;
+	transition: var(--trans-time) opacity;
 }
 
-main {
-	min-height: 70vh;
+a:hover {
+	opacity: .4;
 }
 
-h1, h2, h3, h4, h5 {
+h1, h2, h3, h4, h5, em {
 	color: var(--fg-emph);
 }
 p {
diff --git a/yarn.lock b/yarn.lock
index 6d33f2c..b34daf5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -595,6 +595,11 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"