diff --git a/assets/css/page/contact.css b/assets/css/page/contact.css
new file mode 100644
index 0000000..66031f3
--- /dev/null
+++ b/assets/css/page/contact.css
@@ -0,0 +1,15 @@
+main h2 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+main p {
+  margin-bottom: 3rem;
+}
+
+@media only screen and (max-width: 1024px) {
+  main h2 {
+    font-size: 1.75rem;
+  }
+}
+
diff --git a/assets/css/partials/contact-form.css b/assets/css/partials/contact-form.css
new file mode 100644
index 0000000..7ccf94a
--- /dev/null
+++ b/assets/css/partials/contact-form.css
@@ -0,0 +1,39 @@
+:root {
+  --input-light-background: #f3f3f3;
+  --input-dark-background: #2d2d2d;
+  --button-light-background: #131212;
+  --button-dark-background: #353535;
+}
+
+input,
+textarea,
+button {
+  border: none;
+  border-radius: 0.5625rem;
+  color: var(--text);
+}
+
+button {
+  padding: 1rem 2.8rem;
+  background-color: var(--button-background);
+  color: var(--white);
+}
+
+input,
+textarea {
+  padding: 1.2rem 1.9rem;
+  background-color: var(--input-background);
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  row-gap: 1.7rem;
+}
+
+form input,
+form textarea {
+  width: 100%;
+}
diff --git a/assets/js/baseof.js b/assets/js/baseof.js
index b6b198b..f3bcf9c 100644
--- a/assets/js/baseof.js
+++ b/assets/js/baseof.js
@@ -37,6 +37,18 @@ function loadTheme() {
       ? 'var(--nav-light-background)'
       : 'var(--nav-dark-background)'
   );
+  root.style.setProperty(
+    '--input-background',
+    theme === 'light'
+      ? 'var(--input-light-background)'
+      : 'var(--input-dark-background)'
+  );
+  root.style.setProperty(
+    '--button-background',
+    theme === 'light'
+      ? 'var(--button-light-background)'
+      : 'var(--button-dark-background)'
+  );
   root.style.setProperty(
     '--footer-background',
     theme === 'light'
diff --git a/content/contact.md b/content/contact.md
new file mode 100644
index 0000000..bff2d4f
--- /dev/null
+++ b/content/contact.md
@@ -0,0 +1,9 @@
+---
+layout: "contact"
+title: "Contact"
+date: 2023-10-18T20:03:43+01:00
+---
+
+## Contact
+
+Here you can contact me personally for any questions or opportunities.
\ No newline at end of file
diff --git a/hugo.toml b/hugo.toml
index a94daf7..0ba553e 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -1,6 +1,7 @@
-baseURL = 'http://hazemkrimi.tech/'
 languageCode = 'en-us'
 title = 'Hazem Krimi'
+[params]
+    formSpreeURL = 'https://formspree.io/f/xoqpgyge'
 [module]
 [menu]
     [[menu.main]]
diff --git a/layouts/page/contact.html b/layouts/page/contact.html
new file mode 100644
index 0000000..8397eb8
--- /dev/null
+++ b/layouts/page/contact.html
@@ -0,0 +1,11 @@
+{{ define "styles" }}
+    {{ $styles := resources.Get "css/page/contact.css" | toCSS | minify }}
+
+    <link rel="stylesheet" href="{{ $styles.Permalink }}" />
+{{ end }}
+
+{{ define "main" }}
+    {{ .Content }}
+    
+    {{ partial "contact-form.html" . }}
+{{ end }}
diff --git a/layouts/partials/contact-form.html b/layouts/partials/contact-form.html
new file mode 100644
index 0000000..c964f86
--- /dev/null
+++ b/layouts/partials/contact-form.html
@@ -0,0 +1,10 @@
+{{ $styles := resources.Get "css/partials/contact-form.css" | toCSS | minify }}
+
+<link rel="stylesheet" href="{{ $styles.Permalink }}">
+
+<form action="{{ .Site.Params.formSpreeURL }}" method="post">
+  <input name="name" placeholder="Your name" type="text" />
+  <input name="email" placeholder="Your email" type="email" />
+  <textarea cols="30" name="message" placeholder="Enter your message here" rows="10"></textarea>
+  <button type="submit">Submit</button>
+</form>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e16fecb..e7fe069 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -42,11 +42,9 @@
 
 <nav>
   <div id="menus">
-    <a href="/">Home</a>
-    <a href="/about">About</a>
-    <a href="/projects">Projects</a>
-    <a href="/blog">Blog</a>
-    <a href="/contact">Contact</a>
+    {{ range site.Menus.main.Sort.ByWeight }}
+      <a {{ printf "href=%q" .URL | safeHTMLAttr }}>{{ .Name }}</a>
+    {{ end }}
   </div>
   <hr>
   <div id="links">