diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07f6efb..a2fa879 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - mobile improvements for lists and home page
 - markdown support for page paragraphs and field description
+- omf badge
 
 ### Changed
 ### Fixed
diff --git a/components/omf.module.scss b/components/omf.module.scss
new file mode 100644
index 0000000..d3afd72
--- /dev/null
+++ b/components/omf.module.scss
@@ -0,0 +1,71 @@
+$omf: #000;
+$omfText: #FFF;
+$support: #000;
+
+.badge {
+  left: -65px;
+  height: 30px;
+  top: 40px;
+  position: absolute;
+  text-decoration: none;
+  width: 250px;
+  transform: rotate(-45deg);
+  z-index: 100;
+  font-weight: bold;
+  letter-spacing: 0.05em;
+
+  span {
+    background: transparentize($omf, 0.3);
+    color: $omfText;
+    font-size: 14px;
+    left: 0;
+    padding: 5px 0;
+    position: absolute;
+    text-align: center;
+    width: 250px;
+    box-shadow: rgba($omf, 0.2) 1px 1px 10px;
+    transition: opacity 1s;
+    &:last-child {
+      background: transparentize($support, 0.3);
+      opacity: 0;
+    }
+  }
+
+  :hover span {
+    &:first-child {
+      opacity: 0;
+    }
+    &:last-child {
+      opacity: 1;
+    }
+  }
+
+  span {
+    opacity: 1 !important;
+    backface-visibility: hidden;
+    transition: transform 1s;
+    &:last-child {
+      transform: rotateX(180deg);
+    }
+  }
+
+  &:hover span {
+    &:first-child {
+      transform: rotateX(180deg);
+    }
+    &:last-child {
+      transform: rotateX(360deg);
+    }
+  }
+
+  @media (max-width: 500px) {
+    left: -85px;
+    height: 30px;
+    top: 20px;
+    width: 250px;
+
+    span {
+      font-size: 11px;
+    }
+  }
+}
diff --git a/components/omf.tsx b/components/omf.tsx
new file mode 100644
index 0000000..66321cd
--- /dev/null
+++ b/components/omf.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import scss from './omf.module.scss'
+
+export const Omf: React.FC = () => {
+  return (
+    <a className={scss.badge} href="https://ohmyform.com" target={'_blank'} rel={'noreferrer'}>
+      <span>OhMyForm</span>
+      <span>Fork & Support!</span>
+    </a>
+  )
+}
diff --git a/pages/form/[id]/index.tsx b/pages/form/[id]/index.tsx
index 2b276e0..787bef0 100644
--- a/pages/form/[id]/index.tsx
+++ b/pages/form/[id]/index.tsx
@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next'
 import Swiper from 'react-id-swiper'
 import { ReactIdSwiperProps } from 'react-id-swiper/lib/types'
 import * as OriginalSwiper from 'swiper'
+import {Omf} from '../../../components/omf'
 import { useSubmission } from '../../../components/use.submission'
 
 interface Props {
@@ -77,6 +78,7 @@ const Index: NextPage<Props> = () => {
         background: design.colors.backgroundColor,
       }}
     >
+      <Omf />
       <Swiper {...swiperConfig}>
         {[
           data.form.startPage.show ? (
diff --git a/pages/index.tsx b/pages/index.tsx
index 0d004da..a6dab5b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,6 +6,7 @@ import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LoadingPage } from '../components/loading.page'
+import {Omf} from '../components/omf'
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const { publicRuntimeConfig } = getConfig() as {
@@ -58,6 +59,7 @@ const Index: NextPage = () => {
         background: '#437fdc',
       }}
     >
+      <Omf />
       <img
         alt={'OhMyForm'}
         style={{
diff --git a/pages/login/confirm/[code].tsx b/pages/login/confirm/[code].tsx
index 52d7e7c..ae0b95b 100644
--- a/pages/login/confirm/[code].tsx
+++ b/pages/login/confirm/[code].tsx
@@ -3,10 +3,12 @@ import { AuthFooter } from 'components/auth/footer'
 import { AuthLayout } from 'components/auth/layout'
 import { NextPage } from 'next'
 import React from 'react'
+import {Omf} from '../../../components/omf'
 
 const Index: NextPage = () => {
   return (
     <AuthLayout>
+      <Omf />
       <Alert
         style={{
           margin: 'auto',
diff --git a/pages/login/index.tsx b/pages/login/index.tsx
index 68fd618..b6f12cb 100644
--- a/pages/login/index.tsx
+++ b/pages/login/index.tsx
@@ -14,6 +14,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import {Omf} from '../../components/omf'
 import scss from './index.module.scss'
 
 const Index: NextPage = () => {
@@ -48,6 +49,7 @@ const Index: NextPage = () => {
 
   return (
     <AuthLayout loading={loading}>
+      <Omf />
       <Form
         form={form}
         name="login"
diff --git a/pages/login/recover.tsx b/pages/login/recover.tsx
index 3edbe4e..cde947c 100644
--- a/pages/login/recover.tsx
+++ b/pages/login/recover.tsx
@@ -3,10 +3,12 @@ import { AuthFooter } from 'components/auth/footer'
 import { AuthLayout } from 'components/auth/layout'
 import { NextPage } from 'next'
 import React from 'react'
+import {Omf} from '../../components/omf'
 
 const Recover: NextPage = () => {
   return (
     <AuthLayout>
+      <Omf />
       <Alert
         style={{
           margin: 'auto',
diff --git a/pages/register.tsx b/pages/register.tsx
index 008498a..0908f78 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -16,6 +16,7 @@ import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ErrorPage } from '../components/error.page'
+import {Omf} from '../components/omf'
 import { SETTINGS_QUERY, SettingsQueryData } from '../graphql/query/settings.query'
 import scss from './register.module.scss'
 
@@ -59,6 +60,7 @@ const Register: NextPage = () => {
 
   return (
     <AuthLayout loading={loading}>
+      <Omf />
       <Form
         form={form}
         name="login"