diff --git a/app/javascript/.eslintrc.js b/app/javascript/.eslintrc.js
index aacb9642a..4a0b8e46d 100644
--- a/app/javascript/.eslintrc.js
+++ b/app/javascript/.eslintrc.js
@@ -27,6 +27,7 @@ module.exports = {
             alias: {
               '@crayons': path.join(__dirname, './crayons'),
               '@utilities': path.join(__dirname, './utilities'),
+              '@components': path.join(__dirname, './shared/components'),
             },
             extensions: ['.js', '.jsx'],
           },
diff --git a/app/javascript/.storybook/main.js b/app/javascript/.storybook/main.js
index 2dd90bbf9..60ffb576e 100644
--- a/app/javascript/.storybook/main.js
+++ b/app/javascript/.storybook/main.js
@@ -67,6 +67,7 @@ module.exports = {
         ...config.resolve.alias,
         '@crayons': path.resolve(__dirname, '../crayons'),
         '@utilities': path.resolve(__dirname, '../utilities'),
+        '@components': path.resolve(__dirname, '../shared/components'),
       },
     };
 
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index 156e7874c..842312300 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -22,6 +22,10 @@ environment.splitChunks((config) => {
         ...(config.resolve ? config.resolve.alias : {}),
         '@crayons': path.resolve(__dirname, '../../app/javascript/crayons'),
         '@utilities': path.resolve(__dirname, '../../app/javascript/utilities'),
+        '@components': path.resolve(
+          __dirname,
+          '../../app/javascript/shared/components',
+        ),
       },
     },
   };
diff --git a/docs/frontend/webpacker.md b/docs/frontend/webpacker.md
index 567638362..60d3aed1f 100644
--- a/docs/frontend/webpacker.md
+++ b/docs/frontend/webpacker.md
@@ -37,6 +37,15 @@ loading split chunks multiple times.
 <%= javascript_packs_with_chunks_tag "webShare", "someOtherPack", defer: true %>
 ```
 
+## Webpack aliases
+
+The project uses
+[webpack aliases](https://webpack.js.org/configuration/resolve/#resolvealias).
+The aliases used in the project can be found under `alias` in
+https://github.com/forem/forem/blob/master/config/webpack/environment.js
+
+## Additional Resources
+
 For more information in regards to `javascript_packs_with_chunks_tag`, see
 https://github.com/rails/webpacker/blob/master/lib/webpacker/helper.rb
 
diff --git a/jest.config.js b/jest.config.js
index 77a1638b6..5b0124587 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -35,6 +35,7 @@ module.exports = {
     '\\.(svg|png)$': '<rootDir>/empty-module.js',
     '^@crayons(.*)$': '<rootDir>/app/javascript/crayons$1',
     '^@utilities(.*)$': '<rootDir>/app/javascript/utilities$1',
+    '^@components(.*)$': '<rootDir>/app/javascript/shared/components$1',
   },
   // The webpack config folder for webpacker is excluded as it has a test.js file that gets
   // picked up by jest if this folder is not excluded causing a false negative of a test suite failing.
diff --git a/jsconfig.json b/jsconfig.json
index da867fcd6..c50240fca 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -3,7 +3,8 @@
     "baseUrl": "./",
     "paths": {
       "@crayons/*": ["app/javascript/crayons/*"],
-      "@utilities/*": ["app/javascript/utilities/*"]
+      "@utilities/*": ["app/javascript/utilities/*"],
+      "@components/*": ["app/javascript/shared/components/*"]
     }
   },
   "exclude": ["node_modules", "**/node_modules/*"]