diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 8fa7048..61605e0 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -1,8 +1,12 @@
+// @ts-nocheck
+const { ContextReplacementPlugin } = require('webpack');
+
 const rootConfig = require('../webpack.config');
 
 module.exports = async ({ config }) => ({
     ...config,
     resolve: rootConfig.resolve,
+
     module: {
         ...config.module,
         // our rules should satisfy all storybook needs,
@@ -11,4 +15,9 @@ module.exports = async ({ config }) => ({
     },
 
     resolveLoader: rootConfig.resolveLoader,
+
+    plugins: [
+        ...config.plugins,
+        ...rootConfig.plugins.filter((plugin) => plugin instanceof ContextReplacementPlugin),
+    ],
 });
diff --git a/packages/app/components/footerMenu/FooterMenu.story.tsx b/packages/app/components/footerMenu/FooterMenu.story.tsx
index e5458ba..89a9103 100644
--- a/packages/app/components/footerMenu/FooterMenu.story.tsx
+++ b/packages/app/components/footerMenu/FooterMenu.story.tsx
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import FooterMenu from './FooterMenu';
 
 const PreviewWrapper: ComponentType<{ style?: CSSProperties }> = ({ style, children }) => (
-    <div style={{ padding: '25px', ...style }}>{children}</div>
+    <div style={{ padding: '25px', width: 320, boxSizing: 'border-box', ...style }}>{children}</div>
 );
 
 storiesOf('Components', module).add('FooterMenu', () => (
diff --git a/packages/app/components/footerMenu/FooterMenu.tsx b/packages/app/components/footerMenu/FooterMenu.tsx
index 0ea11e6..8bd1e62 100644
--- a/packages/app/components/footerMenu/FooterMenu.tsx
+++ b/packages/app/components/footerMenu/FooterMenu.tsx
@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import LanguageSwitcher from 'app/components/languageSwitcher';
+import SourceCode from 'app/components/sourceCode';
 import { create as createPopup } from 'app/components/ui/popup/actions';
 import { ContactLink } from 'app/components/contact';
 
@@ -10,28 +11,43 @@ import styles from './footerMenu.scss';
 
 const FooterMenu: ComponentType = () => {
     const dispatch = useDispatch();
-    const onLanguageSwitcherClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(
-        (event) => {
+
+    const createPopupHandler = useCallback(
+        (popup: ComponentType): MouseEventHandler<HTMLAnchorElement> => (event) => {
             event.preventDefault();
-            dispatch(createPopup({ Popup: LanguageSwitcher }));
+            dispatch(createPopup({ Popup: popup }));
         },
         [dispatch],
     );
 
     return (
         <div className={styles.footerMenu} data-testid="footer">
-            <Link to="/rules" className={styles.footerItem}>
-                <Message key="rules" defaultMessage="Rules" />
-            </Link>
-            <ContactLink className={styles.footerItem}>
-                <Message key="contactUs" defaultMessage="Contact Us" />
-            </ContactLink>
-            <Link to="/dev" className={styles.footerItem}>
-                <Message key="forDevelopers" defaultMessage="For developers" />
-            </Link>
+            <div className={styles.row}>
+                <Link to="/rules" className={styles.footerItem}>
+                    <Message key="rules" defaultMessage="Rules" />
+                </Link>
 
-            <div className={styles.langTriggerContainer}>
-                <a href="#" className={styles.langTrigger} onClick={onLanguageSwitcherClick}>
+                {'ꞏ'}
+
+                <ContactLink className={styles.footerItem}>
+                    <Message key="contactUs" defaultMessage="Contact Us" />
+                </ContactLink>
+            </div>
+
+            <div className={styles.row}>
+                <Link to="/dev" className={styles.footerItem}>
+                    <Message key="forDevelopers" defaultMessage="For developers" />
+                </Link>
+
+                {'ꞏ'}
+
+                <a href="#" className={styles.footerItem} onClick={createPopupHandler(SourceCode)}>
+                    <Message key="sourceCode" defaultMessage="Source code" />
+                </a>
+            </div>
+
+            <div className={styles.row}>
+                <a href="#" className={styles.footerItem} onClick={createPopupHandler(LanguageSwitcher)}>
                     <span className={styles.langTriggerIcon} />
                     <Message key="siteLanguage" defaultMessage="Site language" />
                 </a>
diff --git a/packages/app/components/footerMenu/footerMenu.scss b/packages/app/components/footerMenu/footerMenu.scss
index bf15007..1be8be0 100644
--- a/packages/app/components/footerMenu/footerMenu.scss
+++ b/packages/app/components/footerMenu/footerMenu.scss
@@ -7,23 +7,15 @@
     line-height: 12px;
 }
 
+.row {
+    margin-bottom: 2px;
+}
+
 .footerItem {
     display: inline-block;
-    margin: 2px 5px 2px 0;
+    margin: 2px 2px;
     color: #666;
     border-bottom-color: #666;
-
-    &:last-of-type {
-        margin-right: 0;
-    }
-}
-
-.langTriggerContainer {
-    margin-top: 1px;
-}
-
-.langTrigger {
-    composes: footerItem;
 }
 
 .langTriggerIcon {
diff --git a/packages/app/components/sourceCode/SourceCodePopup.story.tsx b/packages/app/components/sourceCode/SourceCodePopup.story.tsx
new file mode 100644
index 0000000..d4e1c4f
--- /dev/null
+++ b/packages/app/components/sourceCode/SourceCodePopup.story.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import SourceCodePopup from './SourceCodePopup';
+
+storiesOf('Components/Popups', module).add('SourceCodePopup', () => <SourceCodePopup onClose={action('onClose')} />);
diff --git a/packages/app/components/sourceCode/SourceCodePopup.tsx b/packages/app/components/sourceCode/SourceCodePopup.tsx
new file mode 100644
index 0000000..6b3f061
--- /dev/null
+++ b/packages/app/components/sourceCode/SourceCodePopup.tsx
@@ -0,0 +1,105 @@
+import React, { ComponentProps, ComponentType } from 'react';
+import { FormattedMessage as Message } from 'react-intl';
+import clsx from 'clsx';
+
+import Popup from 'app/components/ui/popup';
+
+import styles from './sourceCodePopup.scss';
+
+interface Props {
+    onClose?: ComponentProps<typeof Popup>['onClose'];
+}
+
+const SourceCodePopup: ComponentType<Props> = ({ onClose }) => (
+    <Popup
+        title={<Message key="title" defaultMessage="Source code" />}
+        wrapperClassName={styles.boundings}
+        data-testid="source-code-popup"
+        onClose={onClose}
+    >
+        <div className={styles.body}>
+            <div className={styles.item}>
+                <div className={styles.iconWrapper}>
+                    <div className={styles.dbIcon} />
+                </div>
+                <div className={styles.contentWrapper}>
+                    <a href="https://github.com/elyby/accounts" target="_blank" className={styles.itemLink}>
+                        <div className={styles.projectTitle}>Backend</div>
+                        <div className={styles.projectRepository}>
+                            <span className={styles.githubIcon} />
+                            elyby/accounts
+                        </div>
+                    </a>
+                    <div className={styles.projectDescription}>
+                        <Message
+                            key="backendDescription"
+                            defaultMessage="The service core and the linking point for all Ely.by's projects. Includes implementation of OAuth 2.0 protocol, authorization for Minecraft game servers and Mojang‑compatible API."
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <div className={styles.item}>
+                <div className={styles.iconWrapper}>
+                    <div className={clsx(styles.brushIcon, styles.blue)} />
+                </div>
+                <div className={styles.contentWrapper}>
+                    <a href="https://github.com/elyby/accounts-frontend" target="_blank" className={styles.itemLink}>
+                        <div className={clsx(styles.projectTitle, styles.blue)}>Frontend</div>
+                        <div className={styles.projectRepository}>
+                            <span className={styles.githubIcon} />
+                            elyby/accounts-frontend
+                        </div>
+                    </a>
+                    <div className={styles.projectDescription}>
+                        <Message
+                            key="frontendDescription"
+                            defaultMessage="The interface that you're using right now. The mobile‑friendly UI has been translated into multiple languages and has the feature to access multiple accounts simultaneously."
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <div className={styles.item}>
+                <div className={styles.iconWrapper}>
+                    <div className={clsx(styles.envelopeIcon, styles.violet)} />
+                </div>
+                <div className={styles.contentWrapper}>
+                    <a href="https://github.com/elyby/emails-renderer" target="_blank" className={styles.itemLink}>
+                        <div className={clsx(styles.projectTitle, styles.violet)}>Mail rendering service</div>
+                        <div className={styles.projectRepository}>
+                            <span className={styles.githubIcon} />
+                            elyby/emails-renderer
+                        </div>
+                    </a>
+                    <div className={styles.projectDescription}>
+                        <Message
+                            key="mailRenderingServiceDescription"
+                            defaultMessage="A support service that generates beautiful emails in your language. It allows us to use our favorite fonts even where they cannot be used =)"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div className={styles.footer}>
+            <div className={styles.heartIcon} />
+            <div className={styles.footerTitle}>Open Source</div>
+            <div className={styles.footerContent}>
+                <Message
+                    key="weLoveOpenSource"
+                    defaultMessage="Ely.by is an open source project. You can find this and many of our other projects on our organization's page at <githubLink>GitHub</githubLink>. Contributors are welcome!"
+                    values={{
+                        githubLink: (text: string) => (
+                            <a href="https://github.com/elyby/accounts" target="_blank">
+                                {text}
+                            </a>
+                        ),
+                    }}
+                />
+            </div>
+        </div>
+    </Popup>
+);
+
+export default SourceCodePopup;
diff --git a/packages/app/components/sourceCode/index.ts b/packages/app/components/sourceCode/index.ts
new file mode 100644
index 0000000..fda2d68
--- /dev/null
+++ b/packages/app/components/sourceCode/index.ts
@@ -0,0 +1 @@
+export { default } from './SourceCodePopup';
diff --git a/packages/app/components/sourceCode/sourceCodePopup.scss b/packages/app/components/sourceCode/sourceCodePopup.scss
new file mode 100644
index 0000000..49b1711
--- /dev/null
+++ b/packages/app/components/sourceCode/sourceCodePopup.scss
@@ -0,0 +1,113 @@
+@import '~app/components/ui/popup/popup.scss';
+@import '~app/components/ui/colors.scss';
+@import '~app/components/ui/fonts.scss';
+
+.boundings {
+    @include popupBounding(420px);
+}
+
+.body {
+    padding: $popupPadding;
+    color: #666;
+}
+
+.item {
+    display: flex;
+    margin-bottom: 15px;
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+}
+
+.blue {
+    color: $blue;
+}
+
+.violet {
+    color: $violet;
+}
+
+.iconWrapper {
+    margin: 4px 12px 0 0;
+}
+
+.dbIcon {
+    composes: database from '~app/components/ui/icons.scss';
+
+    font-size: 40px;
+}
+
+.brushIcon {
+    composes: brush from '~app/components/ui/icons.scss';
+
+    font-size: 30px;
+}
+
+.envelopeIcon {
+    composes: envelope-open from '~app/components/ui/icons.scss';
+
+    font-size: 33px;
+}
+
+.contentWrapper {
+    flex-grow: 1;
+}
+
+.itemLink {
+    display: inline-block;
+    border: none;
+}
+
+.projectTitle {
+    font-family: $font-family-title;
+    font-size: 20px;
+}
+
+.projectRepository {
+    font-family: $font-family-title;
+    font-size: 14px;
+    color: #9a9a9a;
+    margin: 0 0 5px 1px; // Add 1px from the left to make icon look visually aligned with texts
+}
+
+.githubIcon {
+    composes: github from '~app/components/ui/icons.scss';
+
+    font-size: 12px;
+    margin-right: 2px;
+    position: relative;
+    bottom: 1px;
+}
+
+.projectDescription {
+    font-size: 12px;
+    line-height: 1.4;
+}
+
+.footer {
+    composes: body;
+
+    background: #f5f5f5;
+    text-align: center;
+}
+
+.heartIcon {
+    composes: heart from '~app/components/ui/icons.scss';
+
+    color: $red;
+    font-size: 22px;
+    margin-bottom: 5px;
+}
+
+.footerTitle {
+    font-family: $font-family-title;
+    font-size: 22px;
+    color: #444;
+    margin-bottom: 15px;
+}
+
+.footerContent {
+    font-size: 12px;
+    line-height: 1.4;
+}
diff --git a/packages/app/icons/webfont/brush.svg b/packages/app/icons/webfont/brush.svg
new file mode 100644
index 0000000..487ab74
--- /dev/null
+++ b/packages/app/icons/webfont/brush.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="27">
+    <path d="M13.333 18.75V16H8v2.75H5.333v2.75H0v2.75h2.667V27h10.666v-2.75H16v-5.5z"/>
+    <path d="M26.571 0v2.714h-2.714v2.715h-2.714v2.714h-2.714v2.714h-2.715v2.714H13v2.715h2.714V19h2.715v-2.714h2.714v-2.715h2.714v-2.714h2.714V8.143h2.715V5.429H32V0z"/>
+</svg>
diff --git a/packages/app/icons/webfont/database.svg b/packages/app/icons/webfont/database.svg
new file mode 100644
index 0000000..6ab12ab
--- /dev/null
+++ b/packages/app/icons/webfont/database.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="36">
+    <path d="M25.6 3.2V0H6.4v3.2H0v9.6h6.4V16h19.2v-3.2H32V3.2zm0 12.8v3.088H6.4V16H0v6.175h6.4v3.088h19.2v-3.088H32V16zm0 10.105v3.088H6.4v-3.088H0v6.176h6.4v3.087h19.2v-3.087H32v-6.176z"/>
+</svg>
diff --git a/packages/app/icons/webfont/envelope-open.svg b/packages/app/icons/webfont/envelope-open.svg
new file mode 100644
index 0000000..284b47c
--- /dev/null
+++ b/packages/app/icons/webfont/envelope-open.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="30">
+    <path d="M29.333 13v2.833H24v2.834h-5.333V21.5h-5.334v-2.833H8v-2.834H2.667V13H0v17h32V13zM0 7.5V10h32V7.5h-2.667V5H24V2.5h-5.333V0h-5.334v2.5H8V5H2.667v2.5z"/>
+</svg>
diff --git a/packages/app/icons/webfont/github.svg b/packages/app/icons/webfont/github.svg
new file mode 100644
index 0000000..4fb12ca
--- /dev/null
+++ b/packages/app/icons/webfont/github.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5 0C2.239 0 0 2.295 0 5.127 0 7.392 1.433 9.313 3.42 9.99c.25.048.341-.111.341-.247l-.007-.954c-1.39.31-1.684-.605-1.684-.605-.228-.592-.555-.75-.555-.75-.454-.318.034-.312.034-.312.502.036.766.528.766.528.446.784 1.17.558 1.455.427.045-.332.175-.558.318-.686-1.11-.13-2.278-.57-2.278-2.534 0-.56.195-1.017.515-1.376-.052-.129-.223-.65.048-1.356 0 0 .42-.138 1.376.525.398-.114.826-.17 1.251-.173.425.002.853.06 1.253.173.954-.663 1.373-.525 1.373-.525.272.706.101 1.227.05 1.356.32.36.514.817.514 1.376 0 1.97-1.17 2.403-2.283 2.53.18.16.339.471.339.95 0 .686-.006 1.238-.006 1.406 0 .137.09.297.343.247C8.57 9.31 10 7.39 10 5.127 10 2.295 7.761 0 5 0z" />
+</svg>
diff --git a/packages/app/icons/webfont/heart.svg b/packages/app/icons/webfont/heart.svg
new file mode 100644
index 0000000..9a0b9dd
--- /dev/null
+++ b/packages/app/icons/webfont/heart.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18">
+    <path d="M18.333 3.6V1.8h-1.666V0h-5v1.8H8.333V0h-5v1.8H1.667v1.8H0V9h1.667v1.8h1.666v1.8H5v1.8h1.667v1.8h1.666V18h3.334v-1.8h1.666v-1.8H15v-1.8h1.667v-1.8h1.666V9H20V3.6z"/>
+</svg>