diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 7099e4d458f..1fe19a38a5c 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -10,7 +10,6 @@
 
     <%= favicon_link_tag "favicon.ico"%>
 
-    <%= get_webpack_foreman_vendor_css %>
     <%= stylesheet_link_tag 'application' %>
     <%= yield(:stylesheets) %>
 
diff --git a/developer_docs/adding-dependencies.asciidoc b/developer_docs/adding-dependencies.asciidoc
deleted file mode 100644
index 9cbaeea321b..00000000000
--- a/developer_docs/adding-dependencies.asciidoc
+++ /dev/null
@@ -1,32 +0,0 @@
-[[adding-js-dependencies]]
-= NPM dependencies 
-:toc: right
-:toclevels: 5
-
-## Using/Adding/updating NPM dependencies
-
-Foreman manage npm dependencies with a seperate project called `@theforeman/vendor` which responsible to deliver 3rd-party modules to foreman and its plugins.
-Foreman and its plugins consumes `@theforeman/vendor` project from `npm` in development and from `rpm` in production.
-
-`@theforeman/vendor` lives inside a monorepo together with other foreman javascript tools in a project called https://github.com/theforeman/foreman-js[foreman-js]
-
-
-https://github.com/theforeman/foreman-js/tree/master/packages/vendor[Read more about @theforeman/vendor]
-
-## Consuming `foreman-js` projects from source (locally)
-
-Clone, install, build and link the `foreman-js` project to foreman:
-
-```sh
-git clone git@github.com:theforeman/foreman-js.git
-cd foreman-js
-npm install
-npm run build
-npm run link -- --location ../foreman
-```
-
-To read to full documentation, please go to `foreman-js` contribution guide:
-https://github.com/theforeman/foreman-js/blob/master/CONTRIBUTING.md
-
-**NOTICE: You must remove `./node_modules/@theforeman` before running `npm install`.
-If not, it will destroy your `foreman-js` copy.**
diff --git a/webpack/assets/javascripts/react_app/Root/ReactApp.js b/webpack/assets/javascripts/react_app/Root/ReactApp.js
index 4af38571a2a..0f3d70fd532 100644
--- a/webpack/assets/javascripts/react_app/Root/ReactApp.js
+++ b/webpack/assets/javascripts/react_app/Root/ReactApp.js
@@ -11,6 +11,7 @@ import apolloClient from './apollo';
 import ToastsList from '../components/ToastsList';
 import ErrorBoundary from '../components/common/ErrorBoundary';
 import ConfirmModal from '../components/ConfirmModal';
+import '../common/scss/vendor-core.scss';
 
 const ReactApp = ({ layout, metadata, toasts }) => {
   const [context, setContext] = useState({ metadata });
diff --git a/webpack/assets/javascripts/react_app/common/scss/mixins.scss b/webpack/assets/javascripts/react_app/common/scss/mixins.scss
new file mode 100644
index 00000000000..f106521f856
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/common/scss/mixins.scss
@@ -0,0 +1,21 @@
+// Mixins - Bootstrap overrides
+// -------------------
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+// Form control outline
+@mixin form-control-outline($color: $input-border-focus){
+  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+  &:focus {
+    border-color: $color;
+    outline: 0 !important;
+    @include box-shadow(unquote("inset 0 1px 1px rgba(3, 3, 3, 0.075), 0 0 8px #{$color-rgba}"));
+  }
+}
+/**
+  Third Party mixins imports here
+*/
+@import '~patternfly/dist/sass/patternfly/bootstrap-mixin-overrides';
+@import '~patternfly/dist/sass/patternfly/mixins';
diff --git a/webpack/assets/javascripts/react_app/common/scss/vendor-core.scss b/webpack/assets/javascripts/react_app/common/scss/vendor-core.scss
new file mode 100644
index 00000000000..a4c432652c5
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/common/scss/vendor-core.scss
@@ -0,0 +1,22 @@
+/**
+  Third Party libraries imports here
+*/
+@import '../variables';
+@import './mixins';
+
+@import '~multiselect/css/multi-select.css';
+@import '~react-diff-view/style/index.css';
+@import '~select2/select2-bootstrap.css';
+@import '~select2/select2.css';
+@import "~dsmorse-gridster/dist/jquery.gridster";
+@import "~datatables.net-bs/css/dataTables.bootstrap.css";
+// @import "~@redhat-cloud-services/frontend-components/index.css";
+
+// patternfly v3
+@import '~patternfly-react/dist/sass/_patternfly-react.scss';
+@import '~patternfly-react-extensions/dist/sass/_select.scss';
+@import '~patternfly/dist/sass/patternfly/_loading-state';
+
+// patternfly v4
+@import '~@patternfly/patternfly/patternfly';
+@import '~@patternfly/patternfly/patternfly-addons';
diff --git a/webpack/assets/javascripts/react_app/common/variables.scss b/webpack/assets/javascripts/react_app/common/variables.scss
index f7485b1fc2b..37f34808fe3 100644
--- a/webpack/assets/javascripts/react_app/common/variables.scss
+++ b/webpack/assets/javascripts/react_app/common/variables.scss
@@ -1,3 +1,22 @@
-@import '~@theforeman/vendor/scss/variables.scss';
+/**
+  Third Party variables imports here
+*/
+// patternfly v3
+$font-path: '~patternfly/dist/fonts/';
+$img-path: '~patternfly/dist/img/';
+$icon-font-path: '~patternfly/dist/fonts/';
 
-$header-max-width: calc(#{$pf-global--breakpoint--lg} + 70px); //TODO move into @theforeman/vendor/scss/variables
+// patternfly v4
+$pf-global--font-path: '~@patternfly/patternfly/assets/fonts';
+$fa-font-path: '~@patternfly/patternfly/assets/fonts/webfonts';
+$pf-global--fonticon-path: '~@patternfly/patternfly/assets/pficon';
+$pf-global--image-path: '~@patternfly/patternfly/assets/images';
+
+// patternfly v3
+@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
+@import '~patternfly/dist/sass/patternfly/variables';
+
+// patternfly v4
+@import '~@patternfly/patternfly/base/patternfly-variables';
+
+$header-max-width: calc(#{$pf-global--breakpoint--lg} + 70px);
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss b/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss
index fee44434dbc..7b6b05a1fb1 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss
@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import "../../../../common/variables";
 
 @keyframes blink {
   0% {
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss b/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss
index 5f7e814d201..2f8ea071f87 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss
@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import '../../../../common/variables.scss';
 
 .pf-c-masthead .pf-c-toolbar {
   .pf-c-context-selector__menu-search {
diff --git a/webpack/assets/javascripts/react_app/components/LoginPage/LoginPage.scss b/webpack/assets/javascripts/react_app/components/LoginPage/LoginPage.scss
index c0567e34b7c..5827565ddaa 100644
--- a/webpack/assets/javascripts/react_app/components/LoginPage/LoginPage.scss
+++ b/webpack/assets/javascripts/react_app/components/LoginPage/LoginPage.scss
@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import '../../common/variables.scss';
 
 $caption_font_weight: 600;
 $background_image: url('../LoginPage/background.svg');
diff --git a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss b/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss
index b41b45aad74..5fdad1912c7 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss
+++ b/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss
@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import '../../../common/variables.scss';
 
 .bookmarks-dropdown-item {
   word-break: break-word;
diff --git a/webpack/assets/javascripts/react_app/components/PasswordStrength/PasswordStrength.scss b/webpack/assets/javascripts/react_app/components/PasswordStrength/PasswordStrength.scss
index db05e547a3c..a133d6176cf 100644
--- a/webpack/assets/javascripts/react_app/components/PasswordStrength/PasswordStrength.scss
+++ b/webpack/assets/javascripts/react_app/components/PasswordStrength/PasswordStrength.scss
@@ -1,5 +1,5 @@
-@import "~@theforeman/vendor/scss/variables";
 @import '../../common/colors.scss';
+@import '../../common/variables.scss';
 
 .ReactPasswordStrength {
   .ReactPasswordStrength-input {
diff --git a/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss b/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss
index 1d3c880ace0..9a82d5fa94b 100644
--- a/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss
+++ b/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss
@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import '../../common//variables.scss';
 
 .autocomplete-search {
   width: 100%;
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/DateTime/DateTimeOverrides.scss b/webpack/assets/javascripts/react_app/components/common/forms/DateTime/DateTimeOverrides.scss
index 31c6f3a6c93..4fd50975cce 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/DateTime/DateTimeOverrides.scss
+++ b/webpack/assets/javascripts/react_app/components/common/forms/DateTime/DateTimeOverrides.scss
@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import "../../../../common/variables.scss";
 
 $screen-md:                  992px !default;
 $screen-md-min:              $screen-md !default;
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss b/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss
index 1e06824d4cd..305999c1489 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss
+++ b/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss
@@ -1,5 +1,5 @@
-@import "~@theforeman/vendor/scss/variables";
-@import "~@theforeman/vendor/scss/mixins";
+@import "../../../common/variables";
+@import "../../../common/scss/mixins";
 
 .foreman-numeric-input {
   position: relative;