diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 8b89301e..29029204 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -15,6 +15,7 @@ module.exports = {
       '/templates/',
       '/technology/',
       '/contributing/',
+      '/translation/',
       '/building-from-source/',
       '/deployment/',
       '/changelog/',
diff --git a/docs/contributing/README.md b/docs/contributing/README.md
index d3baaf18..f7d90761 100644
--- a/docs/contributing/README.md
+++ b/docs/contributing/README.md
@@ -30,9 +30,7 @@ Something that's missing on the app that's halting your progress from making the
 
 ## Translation
 
-Currently, there is no translation engine in place that allows for people to easily make translations. I'm still figuring out the most elegant way to implement this feature with minimal code and maximum reach. For now, if you would like to see this feature, please vote in the GitHub Issue linked below and if you are willing to contribute, mention in the comments of the issue which language you would like to translate to.
-
-[Vote for Translation Engine Feature ](https://github.com/AmruthPillai/Reactive-Resume/issues/18)
+For information on how to translate the app into your own language, please visit the [Translation](/translation/) section of the documentation.
 
 ## Commit Code
 
diff --git a/docs/translation/README.md b/docs/translation/README.md
new file mode 100644
index 00000000..ccaffb69
--- /dev/null
+++ b/docs/translation/README.md
@@ -0,0 +1,5 @@
+---
+title: Translation
+---
+
+# Translation
diff --git a/src/components/RightSidebar/RightSidebar.js b/src/components/RightSidebar/RightSidebar.js
index 81f0d6e3..04c88d10 100644
--- a/src/components/RightSidebar/RightSidebar.js
+++ b/src/components/RightSidebar/RightSidebar.js
@@ -8,22 +8,25 @@ import ColorsTab from './tabs/Colors';
 import FontsTab from './tabs/Fonts';
 import ActionsTab from './tabs/Actions';
 import AboutTab from './tabs/About';
+import SettingsTab from './tabs/Settings';
 
 const RightSidebar = () => {
   const { t } = useTranslation('rightSidebar');
 
   const context = useContext(AppContext);
   const { state, dispatch } = context;
-  const { data, theme } = state;
+  const { data, theme, settings } = state;
 
   const tabs = [
     t('templates.title'),
     t('colors.title'),
     t('fonts.title'),
     t('actions.title'),
+    t('settings.title'),
     t('about.title'),
   ];
-  const [currentTab, setCurrentTab] = useState(t('about.title'));
+  const [currentTab, setCurrentTab] = useState(t('settings.title'));
+
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
@@ -46,6 +49,8 @@ const RightSidebar = () => {
         return <FontsTab theme={theme} onChange={onChange} />;
       case t('actions.title'):
         return <ActionsTab data={data} theme={theme} dispatch={dispatch} />;
+      case t('settings.title'):
+        return <SettingsTab settings={settings} onChange={onChange} />;
       case t('about.title'):
         return <AboutTab />;
       default:
diff --git a/src/components/RightSidebar/tabs/Settings.js b/src/components/RightSidebar/tabs/Settings.js
new file mode 100644
index 00000000..a4b0264a
--- /dev/null
+++ b/src/components/RightSidebar/tabs/Settings.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+
+import { languages } from '../../../i18n';
+import Dropdown from '../../../shared/Dropdown';
+
+const SettingsTab = ({ settings, onChange }) => {
+  const { t, i18n } = useTranslation('rightSidebar');
+
+  const onChangeLanguage = code => {
+    i18n.changeLanguage(code);
+    onChange('settings.language', code);
+  };
+
+  return (
+    <div>
+      <Dropdown
+        label={t('settings.language.label')}
+        value={settings.language}
+        onChange={onChangeLanguage}
+        options={languages}
+        optionItem={x => (
+          <option key={x.code} value={x.code}>
+            {x.name}
+          </option>
+        )}
+      />
+
+      <p className="text-gray-800 text-xs">
+        <Trans t={t} i18nKey="settings.language.helpText">
+          If you would like to help translate the app into your own language, please refer the
+          <a
+            className="text-blue-600 hover:underline"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://docs.rxresu.me/translation/"
+          >
+            Translation Documentation
+          </a>
+          .
+        </Trans>
+      </p>
+    </div>
+  );
+};
+
+export default SettingsTab;
diff --git a/src/context/AppContext.js b/src/context/AppContext.js
index d3077584..13cf5a67 100644
--- a/src/context/AppContext.js
+++ b/src/context/AppContext.js
@@ -80,6 +80,9 @@ const initialState = {
       accent: '#f44336',
     },
   },
+  settings: {
+    language: 'en',
+  },
 };
 
 const reducer = (state, { type, payload }) => {
@@ -120,8 +123,7 @@ const reducer = (state, { type, payload }) => {
 
       return {
         ...state,
-        data: payload.data,
-        theme: payload.theme,
+        ...payload,
       };
     case 'load_dummy_data':
       return {
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 852df769..d99a97b6 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -3,6 +3,13 @@ import { initReactI18next } from 'react-i18next';
 
 import resources from './resources';
 
+const languages = [
+  {
+    code: 'en',
+    name: 'English',
+  },
+];
+
 i18n.use(initReactI18next).init({
   lng: 'en',
   fallbackLng: 'en',
@@ -12,4 +19,6 @@ i18n.use(initReactI18next).init({
   defaultNS: 'app',
 });
 
+export { languages };
+
 export default i18n;
diff --git a/src/i18n/resources/en/rightSidebar/index.js b/src/i18n/resources/en/rightSidebar/index.js
index 29ea04a9..2560696c 100644
--- a/src/i18n/resources/en/rightSidebar/index.js
+++ b/src/i18n/resources/en/rightSidebar/index.js
@@ -2,6 +2,7 @@ import templates from './templates.json';
 import colors from './colors.json';
 import fonts from './fonts.json';
 import actions from './actions.json';
+import settings from './settings.json';
 import about from './about.json';
 
 export default {
@@ -9,5 +10,6 @@ export default {
   colors,
   fonts,
   actions,
+  settings,
   about,
 };
diff --git a/src/i18n/resources/en/rightSidebar/settings.json b/src/i18n/resources/en/rightSidebar/settings.json
new file mode 100644
index 00000000..12b19981
--- /dev/null
+++ b/src/i18n/resources/en/rightSidebar/settings.json
@@ -0,0 +1,7 @@
+{
+  "title": "Settings",
+  "language": {
+    "label": "Language",
+    "helpText": "If you would like to help translate the app into your own language, please refer the <1>Translation Documentation</1>."
+  }
+}
\ No newline at end of file
diff --git a/src/i18n/resources/index.js b/src/i18n/resources/index.js
index f74d0b79..0923c276 100644
--- a/src/i18n/resources/index.js
+++ b/src/i18n/resources/index.js
@@ -1,5 +1,7 @@
 import en from './en';
+import kn from './kn';
 
 export default {
   en,
+  kn,
 };
diff --git a/src/shared/Dropdown.js b/src/shared/Dropdown.js
new file mode 100644
index 00000000..4421cb9c
--- /dev/null
+++ b/src/shared/Dropdown.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Dropdown = ({ label, value, onChange, options, optionItem }) => (
+  <div className="flex flex-col mb-2">
+    {label && (
+      <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
+        {label}
+      </label>
+    )}
+    <div className="inline-flex relative w-full bg-gray-200 text-gray-800 rounded py-3 px-4 leading-tight focus:outline-none">
+      <select
+        className="block appearance-none w-full bg-gray-200 text-gray-800 focus:outline-none"
+        value={value}
+        onChange={e => onChange(e.target.value)}
+      >
+        {options.map(optionItem)}
+      </select>
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex justify-center items-center px-2 bg-gray-200">
+        <i className="material-icons">expand_more</i>
+      </div>
+    </div>
+  </div>
+);
+
+export default Dropdown;