diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 0d73b4540e..c03ffc0507 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -62,8 +62,8 @@
     "prebuild": "rm -rf dist/",
     "build": "NODE_ENV=production node ci/runBundler.js && node ci/sentry-send-release.js",
     "test": "jest",
-    "lint": "eslint --ext .js --ext .jsx .",
-    "fix": "eslint --ext .js --ext .jsx . --fix",
+      "lint": "eslint --ext .js --ext .jsx .",
+      "fix": "eslint --ext .js --ext .jsx . --fix",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "prepush": "yarn run test",
diff --git a/packages/ui-component-library/.eslintrc b/packages/ui-component-library/.eslintrc
index 4c6c5670cf..fd5a60c8b6 100644
--- a/packages/ui-component-library/.eslintrc
+++ b/packages/ui-component-library/.eslintrc
@@ -3,9 +3,6 @@
   "extends": [
     "standard",
     "standard-react",
-    "plugin:prettier/recommended",
-    "prettier/standard",
-    "prettier/react",
     "plugin:@typescript-eslint/eslint-recommended"
   ],
   "env": {
@@ -29,6 +26,7 @@
     "react/jsx-handler-names": 0,
     "react/jsx-fragments": 0,
     "react/no-unused-prop-types": 0,
-    "import/export": 0
+    "import/export": 0,
+    "semi": [2, "always"]
   }
 }
diff --git a/packages/ui-component-library/.prettierrc b/packages/ui-component-library/.prettierrc
deleted file mode 100644
index a9646d44c1..0000000000
--- a/packages/ui-component-library/.prettierrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "singleQuote": true,
-  "jsxSingleQuote": true,
-  "semi": false,
-  "tabWidth": 2,
-  "bracketSpacing": true,
-  "jsxBracketSameLine": false,
-  "arrowParens": "always",
-  "trailingComma": "none"
-}
diff --git a/packages/ui-component-library/package.json b/packages/ui-component-library/package.json
index 33b1475f2c..70d7fc6aee 100644
--- a/packages/ui-component-library/package.json
+++ b/packages/ui-component-library/package.json
@@ -1,23 +1,25 @@
 {
-  "name": "ui-component-library",
+  "name": "@near/ui-component-library",
   "version": "1.0.0",
   "description": "The official component library for the NEAR Wallet",
   "author": "gutsyphilip",
   "license": "MIT",
   "repository": "near/near-wallet",
   "main": "dist/index.js",
-  "module": "dist/index.modern.js",
   "modern": "dist/index.modern.js",
+  "module": "dist/index.es.js",
   "umd:main": "dist/index.umd.js",
+  "unpkg": "dist/index.umd.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",
   "engines": {
     "node": ">=10"
   },
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "build": "microbundle-crl --no-compress --format modern,cjs,es,umd",
+    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "prepare": "run-s build",
+    "start": "microbundle-crl watch --no-compress --format modern,cjs,es,umd",
     "test": "run-s test:unit test:lint test:build",
     "test:build": "run-s build",
     "test:lint": "eslint .",
@@ -27,7 +29,8 @@
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^4.2.4",
@@ -37,9 +40,9 @@
     "@types/node": "^12.12.38",
     "@types/react": "^16.9.27",
     "@types/react-dom": "^16.9.7",
+    "@types/styled-components": "^5.1.20",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
-    "microbundle-crl": "^0.13.10",
     "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
     "eslint": "^6.8.0",
@@ -48,13 +51,12 @@
     "eslint-config-standard-react": "^9.2.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-standard": "^4.0.1",
     "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1",
@@ -62,5 +64,8 @@
   },
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "styled-components": "^5.3.3"
+  }
 }
diff --git a/packages/ui-component-library/src/components/Button/Button.tsx b/packages/ui-component-library/src/components/Button/Button.tsx
new file mode 100644
index 0000000000..78df56c0de
--- /dev/null
+++ b/packages/ui-component-library/src/components/Button/Button.tsx
@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+    border-radius: 40px;
+    padding: 5px 32px;
+    outline: none;
+    font-size: 15px;
+    height: 56px;
+    font-weight: 600;
+    // @ts-ignore
+    width: ${(props:any) => props.fullWidth === true ? '100%' : 'auto'};
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 150ms ease;
+    background-color: ${props => props.theme === 'secondary' ? '#ffffff' : '#0072CE'};
+    border: 2px solid ${props => props.theme === 'secondary' ? '#cccccc' : '#0072CE'};
+    color: ${props => props.theme === 'secondary' ? '#888888' : 'white'};
+
+    @media (min-width: 768px) {
+        &:enabled {
+            &:hover {
+                background-color: ${props => props.theme === 'secondary' ? '#cccccc' : '#007fe6'};
+                color: white;
+            }
+        }
+    }
+
+    &:disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+    }
+`;
+
+const Button = (props:any) => (
+  <StyledButton
+    theme={props.theme}
+    className={props.className}
+    onClick={props.onClick}
+    disabled={props.disabled}
+    title={props.title}
+    type={props.type}
+    // @ts-ignore
+    fullWidth={props.fullWidth}
+  >
+    {props.children}
+  </StyledButton>
+);
+
+Button.propTypes = {
+  disabled: PropTypes.bool,
+  theme: PropTypes.oneOf(['primary', 'secondary']),
+  fullWidth: PropTypes.bool
+};
+
+Button.defaultProps = {
+  disabled: false,
+  theme: 'primary',
+  fullWidth: true
+};
+
+export default Button;
diff --git a/packages/ui-component-library/src/components/Button/index.ts b/packages/ui-component-library/src/components/Button/index.ts
new file mode 100644
index 0000000000..efe8c800c0
--- /dev/null
+++ b/packages/ui-component-library/src/components/Button/index.ts
@@ -0,0 +1 @@
+export { default } from './Button';
diff --git a/packages/ui-component-library/src/index.test.tsx b/packages/ui-component-library/src/index.test.tsx
index a0f0449b5a..6d7d1f9da3 100644
--- a/packages/ui-component-library/src/index.test.tsx
+++ b/packages/ui-component-library/src/index.test.tsx
@@ -1,7 +1,7 @@
-import { ExampleComponent } from '.'
+import { ExampleComponent } from '.';
 
 describe('ExampleComponent', () => {
   it('is truthy', () => {
-    expect(ExampleComponent).toBeTruthy()
-  })
-})
+    expect(ExampleComponent).toBeTruthy();
+  });
+});
diff --git a/packages/ui-component-library/src/index.tsx b/packages/ui-component-library/src/index.tsx
index c06ff11d34..6cbdb4a5aa 100644
--- a/packages/ui-component-library/src/index.tsx
+++ b/packages/ui-component-library/src/index.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
-import styles from './styles.module.css'
+import * as React from 'react';
+import styles from './styles.module.css';
 
 interface Props {
   text: string
 }
 
 export const ExampleComponent = ({ text }: Props) => {
-  return <div className={styles.test}>Example Component: {text}</div>
-}
+  return <div className={styles.test}>Example Component: {text}</div>;
+};
diff --git a/packages/ui-component-library/src/typings.d.ts b/packages/ui-component-library/src/typings.d.ts
index cd16102bb9..fe5f91d8e3 100644
--- a/packages/ui-component-library/src/typings.d.ts
+++ b/packages/ui-component-library/src/typings.d.ts
@@ -13,5 +13,5 @@ declare module '*.svg' {
   const svgUrl: string;
   const svgComponent: SvgrComponent;
   export default svgUrl;
-  export { svgComponent as ReactComponent }
+  export { svgComponent as ReactComponent };
 }
diff --git a/packages/ui-component-library/tsconfig.json b/packages/ui-component-library/tsconfig.json
index 52c2390fca..b054454ff5 100644
--- a/packages/ui-component-library/tsconfig.json
+++ b/packages/ui-component-library/tsconfig.json
@@ -3,6 +3,7 @@
     "outDir": "dist",
     "module": "esnext",
     "lib": ["dom", "esnext"],
+    "target": "es5",
     "moduleResolution": "node",
     "jsx": "react",
     "sourceMap": true,
@@ -20,3 +21,4 @@
   "include": ["src"],
   "exclude": ["node_modules", "dist", "example"]
 }
+