diff --git a/components/Logo.jsx b/components/Logo.jsx
new file mode 100644
index 0000000..8324c6d
--- /dev/null
+++ b/components/Logo.jsx
@@ -0,0 +1,30 @@
+import Image from 'next/image'
+import logoWithText from '../public/logos/logo.svg'
+import logo from '../public/logos/logo-footer.svg'
+import {useTranslation} from "next-i18next";
+
+export const getStaticProps = async ({locale}) => ({
+  props: {
+    ...(await serverSideTranslations(locale, [], config)),
+  },
+});
+
+const Logo = props => {
+  const {t} = useTranslation();
+  const {title} = props;
+  const src = title ? logoWithText : logo;
+  return (
+    <Image
+      src={src}
+      alt={t('logo-alt')}
+      className="d-block"
+      {...props}
+    />
+  )
+};
+
+Logo.defaultProps = {
+  title: true
+};
+
+export default Logo;
diff --git a/styles/scss/_buttons.scss b/styles/scss/_buttons.scss
new file mode 100644
index 0000000..51eb5c4
--- /dev/null
+++ b/styles/scss/_buttons.scss
@@ -0,0 +1,40 @@
+.btn-opacity:hover {
+  background-color: transparent;
+  border-color: white;
+  opacity: 1;
+}
+.btn-opacity {
+  background-color: transparent;
+  width: fit-content;
+  opacity: 0.4;
+  transition: 0.5s;
+}
+.btn-transparent:hover {
+  background-color: transparent;
+  border-color: white;
+}
+.btn-transparent {
+  background-color: transparent;
+  width: fit-content;
+  transition: 0.5s;
+  margin: auto;
+}
+.btn-secondary {
+  width: fit-content;
+  background-color: transparent;
+}
+.btn-primary {
+  box-sizing: border-box;
+
+  /* Auto layout */
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 24px;
+  gap: 16px;
+
+  /* primary */
+  border: 2px solid #2400fd;
+  box-shadow: 0px 5px 0px #7a64f9;
+}
diff --git a/styles/scss/_footer.scss b/styles/scss/_footer.scss
new file mode 100644
index 0000000..e63ed59
--- /dev/null
+++ b/styles/scss/_footer.scss
@@ -0,0 +1,31 @@
+// .tacky {
+//   margin: 0;
+//   padding: 0;
+//   list-style-type: none;
+//   flex-basis: auto;
+// }
+// 
+// .tacky col {
+//   display: inline-block;
+// }
+// 
+// .tacky col:after {
+//   margin: 0 5px;
+// }
+// 
+// .tacky col:last-of-type:after {
+//   content: "";
+//   margin: 0;
+// }
+// 
+// .tacky col.no-tack:after {
+//   content: "";
+//   margin: 0;
+//   display: none;
+// }
+
+@include media-breakpoint-down('md') {
+  footer {
+    display: none !important;
+  }
+}