diff --git a/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/main-success-icon.tsx b/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/main-success-icon.tsx
new file mode 100644
index 00000000..f12348a1
--- /dev/null
+++ b/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/main-success-icon.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import SmileIcon from './smile-icon.svg';
+import styled from 'checkout/styled-components';
+
+const MainSuccess = styled.svg`
+    width: 100px;
+    height: 100px;
+    display: block;
+    margin: auto;
+`;
+
+export const MainSuccessIcon = () => (
+    <MainSuccess viewBox="0 0 86 86" id="success-icon">
+        <SmileIcon />
+    </MainSuccess>
+);
diff --git a/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/neutral-success-icon.svg b/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/neutral-success-icon.svg
deleted file mode 100644
index 74ca0a83..00000000
--- a/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/neutral-success-icon.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg">
-    <g fill-rule="nonzero" fill="none">
-        <circle fill="#D1658E" cx="43" cy="43" r="43" />
-        <path
-            stroke="#FFF"
-            stroke-width="5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M27 42.862L39.089 55 61 33"
-        />
-    </g>
-</svg>
diff --git a/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/neutral-success-icon.tsx b/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/neutral-success-icon.tsx
new file mode 100644
index 00000000..ebb60df7
--- /dev/null
+++ b/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/neutral-success-icon.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import styled from 'checkout/styled-components';
+
+const NeutralSuccess = styled.svg`
+    width: 100px;
+    height: 100px;
+    display: block;
+    margin: auto;
+    circle {
+        fill: ${({ theme }) => theme.color.success[1]};
+    }
+    path {
+        stroke: #fff;
+        stroke-width: 5;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+    }
+`;
+
+export const NeutralSuccessIcon = () => (
+    <NeutralSuccess viewBox="0 0 86 86" id="success-icon">
+        <g fillRule="nonzero" fill="none">
+            <circle cx="43" cy="43" r="43" />
+            <path d="M27 42.862L39.089 55 61 33" />
+        </g>
+    </NeutralSuccess>
+);
diff --git a/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/smile-icon.svg b/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/smile-icon.svg
new file mode 100644
index 00000000..c7ebd3ac
--- /dev/null
+++ b/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/smile-icon.svg
@@ -0,0 +1,19 @@
+<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M46 23C46 10.536 36.086.388 23.714.01 23.477.005 23.239 0 23 0 10.297 0 0 10.297 0 23" id="a" />
+        <mask id="b" fill="#fff"><use transform="rotate(180 23 11.5)" xlink:href="#a" /></mask>
+    </defs>
+    <g fill="none" fill-rule="nonzero">
+        <circle fill="#38CD8F" cx="43" cy="43" r="43" />
+        <path
+            d="M65.093 35c0-3.314-2.707-6-6.046-6C55.707 29 53 31.686 53 35m-19.907 0c0-3.314-2.707-6-6.046-6C23.707 29 21 31.686 21 35"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-width="2"
+        />
+        <g transform="translate(20 48)">
+            <use fill="#000" transform="rotate(180 23 11.5)" xlink:href="#a" />
+            <ellipse fill="#E75542" mask="url(#b)" cx="23" cy="23.5" rx="14" ry="8.5" />
+        </g>
+    </g>
+</svg>
diff --git a/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/success-icon.svg b/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/success-icon.svg
deleted file mode 100644
index 6a400a47..00000000
--- a/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/success-icon.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <path
-            d="M46 23C46 10.536 36.086.388 23.714.01 23.477.005 23.239 0 23 0 10.297 0 0 10.297 0 23"
-            id="semicircle"
-        />
-        <mask id="semicircle2" fill="#fff"><use xlink:href="#semicircle" /></mask>
-        <mask id="semicircle3" fill="#fff"><use transform="rotate(180 23 11.5)" xlink:href="#semicircle" /></mask>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <circle fill="#38CD8F" fill-rule="nonzero" cx="43" cy="43" r="43" />
-        <g fill-rule="nonzero" stroke="#000" stroke-linecap="round" stroke-width="2">
-            <path
-                d="M65.093 35c0-3.314-2.707-6-6.046-6C55.707 29 53 31.686 53 35M33.093 35c0-3.314-2.707-6-6.046-6C23.707 29 21 31.686 21 35"
-            />
-        </g>
-        <g transform="translate(20 48)">
-            <use fill="#000" fill-rule="nonzero" transform="rotate(180 23 11.5)" xlink:href="#semicircle" />
-            <ellipse fill="#E75542" fill-rule="nonzero" mask="url(#semicircle3)" cx="23" cy="23.5" rx="14" ry="8.5" />
-        </g>
-    </g>
-</svg>
diff --git a/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/success-icon.tsx b/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/success-icon.tsx
index 6da05dae..d87fac7d 100644
--- a/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/success-icon.tsx
+++ b/src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/success-icon.tsx
@@ -1,18 +1,15 @@
 import * as React from 'react';
 
-import Success from './success-icon.svg';
-import NeutralSuccess from './neutral-success-icon.svg';
-import styled, { withTheme } from 'checkout/styled-components';
+import { withTheme } from 'checkout/styled-components';
 import { ThemeName, WithThemeProps } from 'checkout/themes';
+import { NeutralSuccessIcon } from './neutral-success-icon';
+import { MainSuccessIcon } from './main-success-icon';
 
-export const SuccessIcon = styled(
-    withTheme(({ theme, ...props }: WithThemeProps) => {
-        const Icon = theme.name === ThemeName.main ? Success : NeutralSuccess;
-        return <Icon {...props} id="success-icon" />;
-    })
-)`
-    width: 100px;
-    height: 100px;
-    display: block;
-    margin: auto;
-`;
+export const SuccessIcon = withTheme(({ theme }: WithThemeProps) => {
+    switch (theme.name) {
+        case ThemeName.main:
+            return <MainSuccessIcon />;
+        default:
+            return <NeutralSuccessIcon />;
+    }
+});
diff --git a/src/app/themes/common-palettes.ts b/src/app/themes/common-palettes.ts
new file mode 100644
index 00000000..17ec360f
--- /dev/null
+++ b/src/app/themes/common-palettes.ts
@@ -0,0 +1,17 @@
+export const neutral = {
+    0: '#fff',
+    0.1: '#d0d0d0',
+    0.2: '#bababa',
+    0.3: '#afafaf',
+    0.8: '#333',
+    0.9: '#292929',
+    1: '#000'
+};
+
+export const error = {
+    1: '#e75542'
+};
+
+export const warning = {
+    1: '#ffe05c'
+};
diff --git a/src/app/themes/coral.ts b/src/app/themes/coral.ts
index 5dabd383..a8463b96 100644
--- a/src/app/themes/coral.ts
+++ b/src/app/themes/coral.ts
@@ -1,19 +1,12 @@
 import { css } from 'checkout/styled-components';
 import { ThemeName } from './theme-name';
 import { Theme } from './theme';
+import { error, neutral, warning } from './common-palettes';
 
 const theme: Theme = {
     name: ThemeName.coral,
     color: {
-        neutral: {
-            0: '#fff',
-            0.1: '#d0d0d0',
-            0.2: '#bababa',
-            0.3: '#afafaf',
-            0.8: '#333',
-            0.9: '#292929',
-            1: '#000'
-        },
+        neutral,
         primary: {
             0.1: '#ff8454',
             1: '#d1658e',
@@ -26,14 +19,12 @@ const theme: Theme = {
             1: '#8330ec',
             1.1: '#9b4f69'
         },
-        error: {
-            1: '#e75542'
-        },
-        warning: {
-            1: '#ffe05c'
-        },
+        error,
+        warning,
         info: {},
-        success: {},
+        success: {
+            1: '#d1658e'
+        },
         focus: {
             1: '#d1658e'
         }
diff --git a/src/app/themes/index.ts b/src/app/themes/index.ts
index d337e450..668b3f2d 100644
--- a/src/app/themes/index.ts
+++ b/src/app/themes/index.ts
@@ -2,8 +2,9 @@ import { Theme } from './theme';
 import { ThemeName } from './theme-name';
 import main from './main';
 import coral from './coral';
+import persianGreen from './persian-green';
 
-const themes = [main, coral];
+const themes = [main, coral, persianGreen];
 
 export const DEFAULT_THEME = main;
 
diff --git a/src/app/themes/main.ts b/src/app/themes/main.ts
index db8f9529..5f2736d7 100644
--- a/src/app/themes/main.ts
+++ b/src/app/themes/main.ts
@@ -1,19 +1,12 @@
 import { css } from 'checkout/styled-components';
 import { ThemeName } from './theme-name';
 import { Theme } from './theme';
+import { error, neutral, warning } from './common-palettes';
 
 const theme: Theme = {
     name: ThemeName.main,
     color: {
-        neutral: {
-            0: '#fff',
-            0.1: '#d0d0d0',
-            0.2: '#bababa',
-            0.3: '#afafaf',
-            0.8: '#333',
-            0.9: '#292929',
-            1: '#000'
-        },
+        neutral,
         primary: {
             0.1: '#c3f0dd',
             1: '#38cd8f',
@@ -26,12 +19,8 @@ const theme: Theme = {
             1: '#8330ec',
             1.1: '#5248c9'
         },
-        error: {
-            1: '#e75542'
-        },
-        warning: {
-            1: '#ffe05c'
-        },
+        error,
+        warning,
         info: {},
         success: {},
         focus: {
diff --git a/src/app/themes/persian-green.ts b/src/app/themes/persian-green.ts
new file mode 100644
index 00000000..e06da075
--- /dev/null
+++ b/src/app/themes/persian-green.ts
@@ -0,0 +1,54 @@
+import { css } from 'checkout/styled-components';
+import { ThemeName } from './theme-name';
+import { Theme } from './theme';
+import { error, neutral, warning } from './common-palettes';
+
+const palette = {
+    Pelorous: '#36BABA',
+    PersianGreen: '#00A69B',
+    Teal: '#008E89',
+    Wistful: '#9CA8CF',
+    Smalt: '#003A8E',
+    BayOfMany: '#213980'
+};
+
+const theme: Theme = {
+    name: ThemeName.persianGreen,
+    color: {
+        neutral,
+        primary: {
+            0.1: palette.PersianGreen,
+            1: palette.PersianGreen,
+            1.1: palette.Pelorous,
+            1.2: palette.Teal
+        },
+        secondary: {
+            0.7: palette.Wistful,
+            0.9: palette.PersianGreen,
+            1: palette.Smalt,
+            1.1: palette.Teal
+        },
+        error,
+        warning,
+        info: {},
+        success: {
+            1: palette.PersianGreen
+        },
+        focus: {
+            1: palette.PersianGreen
+        }
+    },
+    gradients: {
+        form: css`linear-gradient(45deg, ${palette.BayOfMany} -20%, ${palette.PersianGreen} 90%)`,
+        bg: css`linear-gradient(to top right, ${palette.Smalt}, ${palette.Pelorous})`,
+        loader: [
+            [palette.Pelorous, '0%'],
+            [palette.BayOfMany, '100%']
+        ]
+    },
+    font: {
+        family: "'Roboto', sans-serif"
+    }
+};
+
+export default theme;
diff --git a/src/app/themes/theme-name.ts b/src/app/themes/theme-name.ts
index 43137158..d143e6b1 100644
--- a/src/app/themes/theme-name.ts
+++ b/src/app/themes/theme-name.ts
@@ -1,4 +1,5 @@
 export enum ThemeName {
     main = 'main',
-    coral = 'coral'
+    coral = 'coral',
+    persianGreen = 'persianGreen'
 }
diff --git a/src/app/themes/theme.ts b/src/app/themes/theme.ts
index ee259acf..d2bbc765 100644
--- a/src/app/themes/theme.ts
+++ b/src/app/themes/theme.ts
@@ -32,7 +32,9 @@ export interface Theme {
             1: string;
         };
         info: {};
-        success: {};
+        success: {
+            1?: string;
+        };
         focus: {
             1: string;
         };