diff --git a/package.json b/package.json
index 6834d1d2..8b66caf2 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@auth0/auth0-react": "^1.0.0",
     "@chakra-ui/icons": "^1.0.2",
     "@chakra-ui/react": "^1.0.4",
+    "@emotion/css": "^11.1.3",
     "@emotion/react": "^11.1.4",
     "@emotion/styled": "^11.0.0",
     "@loadable/component": "^5.12.0",
diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index 9d629d17..4c9ea9cf 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import gql from "graphql-tag";
 import {
   Box,
diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index ca88d74c..70c93dc5 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import {
   AspectRatio,
   Button,
diff --git a/src/app/ItemTradesPage.js b/src/app/ItemTradesPage.js
index 1d7a9a6f..d42b2309 100644
--- a/src/app/ItemTradesPage.js
+++ b/src/app/ItemTradesPage.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { Box, Skeleton, useColorModeValue, useToken } from "@chakra-ui/react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
diff --git a/src/app/PrivacyPolicyPage.js b/src/app/PrivacyPolicyPage.js
index 0f03a7d5..0418e248 100644
--- a/src/app/PrivacyPolicyPage.js
+++ b/src/app/PrivacyPolicyPage.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { VStack } from "@chakra-ui/react";
 
 import { Heading1, Heading2, Heading3 } from "./util";
diff --git a/src/app/UserItemsPage.js b/src/app/UserItemsPage.js
index c0a7b2e0..768fc673 100644
--- a/src/app/UserItemsPage.js
+++ b/src/app/UserItemsPage.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import {
   Badge,
   Box,
diff --git a/src/app/WardrobePage/Item.js b/src/app/WardrobePage/Item.js
index 123ded18..c305c921 100644
--- a/src/app/WardrobePage/Item.js
+++ b/src/app/WardrobePage/Item.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { css, cx } from "emotion";
+import { css, cx } from "@emotion/css";
 import {
   Box,
   Flex,
diff --git a/src/app/WardrobePage/ItemsPanel.js b/src/app/WardrobePage/ItemsPanel.js
index 5ef03fb9..d6ee1ab9 100644
--- a/src/app/WardrobePage/ItemsPanel.js
+++ b/src/app/WardrobePage/ItemsPanel.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import {
   Box,
   Editable,
diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js
index 7bc6df81..b7673edc 100644
--- a/src/app/WardrobePage/OutfitControls.js
+++ b/src/app/WardrobePage/OutfitControls.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { css, cx } from "emotion";
+import { css, cx } from "@emotion/css";
 import {
   Box,
   Button,
diff --git a/src/app/WardrobePage/PosePicker.js b/src/app/WardrobePage/PosePicker.js
index cc9d4e65..b2ef66ee 100644
--- a/src/app/WardrobePage/PosePicker.js
+++ b/src/app/WardrobePage/PosePicker.js
@@ -1,7 +1,7 @@
 import React from "react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
-import { css, cx } from "emotion";
+import { css, cx } from "@emotion/css";
 import {
   Box,
   Button,
diff --git a/src/app/WardrobePage/SearchToolbar.js b/src/app/WardrobePage/SearchToolbar.js
index b4c0bddb..0e4d0ee4 100644
--- a/src/app/WardrobePage/SearchToolbar.js
+++ b/src/app/WardrobePage/SearchToolbar.js
@@ -12,7 +12,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react";
 import { CloseIcon, SearchIcon } from "@chakra-ui/icons";
-import { css, cx } from "emotion";
+import { css, cx } from "@emotion/css";
 import Autosuggest from "react-autosuggest";
 
 /**
diff --git a/src/app/WardrobePage/support/ItemSupportDrawer.js b/src/app/WardrobePage/support/ItemSupportDrawer.js
index 09492a08..360c3888 100644
--- a/src/app/WardrobePage/support/ItemSupportDrawer.js
+++ b/src/app/WardrobePage/support/ItemSupportDrawer.js
@@ -1,7 +1,7 @@
 import * as React from "react";
 import gql from "graphql-tag";
 import { useQuery, useMutation } from "@apollo/client";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import {
   Badge,
   Box,
diff --git a/src/app/components/HangerSpinner.js b/src/app/components/HangerSpinner.js
index 20f54c7e..a10aa08c 100644
--- a/src/app/components/HangerSpinner.js
+++ b/src/app/components/HangerSpinner.js
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { Box, useColorModeValue } from "@chakra-ui/react";
 import { createIcon } from "@chakra-ui/icons";
 
diff --git a/src/app/components/ItemCard.js b/src/app/components/ItemCard.js
index cf9bfe89..478dd2cf 100644
--- a/src/app/components/ItemCard.js
+++ b/src/app/components/ItemCard.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import {
   Badge,
   Box,
diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index 055634fe..d7ddc385 100644
--- a/src/app/components/OutfitPreview.js
+++ b/src/app/components/OutfitPreview.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, DarkMode, Flex, Text } from "@chakra-ui/react";
 import { WarningIcon } from "@chakra-ui/icons";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import OutfitMovieLayer, {
diff --git a/yarn.lock b/yarn.lock
index a68f5ef0..2f9fdef8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2585,6 +2585,17 @@
     "@emotion/utils" "0.11.3"
     babel-plugin-emotion "^10.0.27"
 
+"@emotion/css@^11.1.3":
+  version "11.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.1.3.tgz#9ed44478b19e5d281ccbbd46d74d123d59be793f"
+  integrity sha512-RSQP59qtCNTf5NWD6xM08xsQdCZmVYnX/panPYvB6LQAPKQB6GL49Njf0EMbS3CyDtrlWsBcmqBtysFvfWT3rA==
+  dependencies:
+    "@emotion/babel-plugin" "^11.0.0"
+    "@emotion/cache" "^11.1.3"
+    "@emotion/serialize" "^1.0.0"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+
 "@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"