diff --git a/.storybook/main.js b/.storybook/main.js
index fdad856..fc780b1 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -7,6 +7,7 @@ module.exports = {
     '../components/**/*.stories.mdx',
     '../components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
+  "staticDirs": ["../public"],
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
diff --git a/README.md b/README.md
index 436bf98..46478c6 100644
--- a/README.md
+++ b/README.md
@@ -35,3 +35,7 @@
 ### Aliases, Fonts and Global styles
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/6)
+
+### Aliases and themes for Jest
+
+[pull request](https://github.com/nickovchinnikov/coursesbox/pull/7)
diff --git a/components/Button/Button.test.tsx b/components/Button/Button.test.tsx
index 09efd46..64eb191 100644
--- a/components/Button/Button.test.tsx
+++ b/components/Button/Button.test.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
+import { render, screen } from "@/test-utils";
+
 import { Button } from "./Button";
 
 describe("Button test cases", () => {
diff --git a/components/Button/__snapshots__/Button.test.tsx.snap b/components/Button/__snapshots__/Button.test.tsx.snap
index 0186d5b..7f63928 100644
--- a/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/components/Button/__snapshots__/Button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Button test cases Render check 1`] = `
 <DocumentFragment>
   <button
-    class="css-o0uw0a"
+    class="css-1s99dgh"
     color="primary"
   >
     Button
diff --git a/jest.config.js b/jest.config.js
index 0fc62b4..0036f3a 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -9,6 +9,10 @@ const createJestConfig = nextJest({
 const customJestConfig = {
   // Add more setup options before each test is run
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  moduleNameMapper: {
+    // Handle module aliases (this will be automatically configured for you soon)
+    "^@/(.*)$": "<rootDir>/$1",
+  },
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
   moduleDirectories: ["node_modules", "<rootDir>/"],
   testEnvironment: "jest-environment-jsdom",
diff --git a/package.json b/package.json
index 52c1089..3e3dee6 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "storybook": "start-storybook -p 6006 -s ./public",
-    "build-storybook": "build-storybook -s ./public",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
     "test": "jest"
   },
   "dependencies": {
diff --git a/test-utils.tsx b/test-utils.tsx
new file mode 100644
index 0000000..ddeb1f0
--- /dev/null
+++ b/test-utils.tsx
@@ -0,0 +1,18 @@
+import React, { FC, ReactElement } from "react";
+import { render, RenderOptions } from "@testing-library/react";
+import { ThemeProvider } from "@emotion/react";
+
+import { Themes } from "./styles/themes";
+
+const Wrapper: FC = ({ children }) => (
+  <ThemeProvider theme={Themes.light}>{children}</ThemeProvider>
+);
+
+const customRender = (ui: ReactElement, options?: RenderOptions) =>
+  render(ui, { wrapper: Wrapper, ...options });
+
+// re-export everything
+export * from "@testing-library/react";
+
+// override render method
+export { customRender as render };