diff --git a/packages/create-bison-app/template/README.md.ejs b/packages/create-bison-app/template/README.md.ejs
index 17c59930..5d3fa71b 100644
--- a/packages/create-bison-app/template/README.md.ejs
+++ b/packages/create-bison-app/template/README.md.ejs
@@ -333,7 +333,7 @@ You should now have a fully working form that creates a new database entry on su
 ```jsx
 import React from 'react';
 import gql from 'graphql-tag';
-import { Spinner, Text } from '@chakra-ui/core';
+import { Spinner, Text } from '@chakra-ui/react';
 
 export const QUERY = gql`
   query organization {
@@ -413,7 +413,7 @@ export const QUERY = gql`
 ```tsx
 import React from 'react';
 import gql from 'graphql-tag';
-import { Spinner, Text } from '@chakra-ui/core';
+import { Spinner, Text } from '@chakra-ui/react';
 
 import { OrganizationQuery, useOrganizationQuery } from '../types';
 
@@ -453,7 +453,7 @@ export const OrganizationCell = ({ organizationId }) => {
 ```tsx
 import React from 'react';
 import Head from 'next/head';
-import { Flex } from '@chakra-ui/core';
+import { Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 
 import { OrganizationCell } from '../../cells/OrganizationCell';
diff --git a/packages/create-bison-app/template/_templates/cell/new/new.ejs b/packages/create-bison-app/template/_templates/cell/new/new.ejs
index d6756042..8dcd738e 100644
--- a/packages/create-bison-app/template/_templates/cell/new/new.ejs
+++ b/packages/create-bison-app/template/_templates/cell/new/new.ejs
@@ -5,7 +5,7 @@ to: cells/<%= [h.inflection.camelize(h.dirName(name)), h.camelizedBaseName(name)
 <% component = h.camelizedBaseName(name) -%>
 import React from 'react';
 import gql from 'graphql-tag';
-import { Spinner, Text } from '@chakra-ui/core';
+import { Spinner, Text } from '@chakra-ui/react';
 
 import { useMyProfileQuery, MyProfileQuery } from '../types';
 
diff --git a/packages/create-bison-app/template/_templates/component/new/new.ejs b/packages/create-bison-app/template/_templates/component/new/new.ejs
index a95bf2dc..756baec3 100644
--- a/packages/create-bison-app/template/_templates/component/new/new.ejs
+++ b/packages/create-bison-app/template/_templates/component/new/new.ejs
@@ -4,7 +4,7 @@ to: components/<%= [h.inflection.camelize(h.dirName(name)), h.camelizedBaseName(
 <% formattedPath = h.camelizedPathName(name) -%>
 <% component = h.camelizedBaseName(name) -%>
 import React from 'react';
-import { Heading, Center } from '@chakra-ui/core';
+import { Heading, Center } from '@chakra-ui/react';
 
 /** Description of component */
 export function <%= component %>() {
diff --git a/packages/create-bison-app/template/_templates/page/new/new.ejs b/packages/create-bison-app/template/_templates/page/new/new.ejs
index 7b7d8c49..cdb11bb5 100644
--- a/packages/create-bison-app/template/_templates/page/new/new.ejs
+++ b/packages/create-bison-app/template/_templates/page/new/new.ejs
@@ -6,7 +6,7 @@ to: pages/<%= name %>.tsx
 <% base = h.camelizedBaseName(name) -%>
 import React from 'react';
 import Head from 'next/head';
-import { Heading, Center, Flex } from '@chakra-ui/core';
+import { Heading, Center, Flex } from '@chakra-ui/react';
 
 function <%= pageName %>() {
   return (
diff --git a/packages/create-bison-app/template/components/AllProviders.tsx b/packages/create-bison-app/template/components/AllProviders.tsx
index 4daa9acd..377a6eb4 100644
--- a/packages/create-bison-app/template/components/AllProviders.tsx
+++ b/packages/create-bison-app/template/components/AllProviders.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChakraProvider, CSSReset } from '@chakra-ui/core';
+import { ChakraProvider, CSSReset } from '@chakra-ui/react';
 import { ApolloProvider } from '@apollo/client';
 
 import { AuthProvider } from '../context/auth';
diff --git a/packages/create-bison-app/template/components/CenteredBoxForm.tsx b/packages/create-bison-app/template/components/CenteredBoxForm.tsx
index 00b653dd..735da08a 100644
--- a/packages/create-bison-app/template/components/CenteredBoxForm.tsx
+++ b/packages/create-bison-app/template/components/CenteredBoxForm.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box } from '@chakra-ui/core';
+import { Box } from '@chakra-ui/react';
 
 /** A form with a centered box. Ex: Login, Signup */
 export function CenteredBoxForm({ children }) {
diff --git a/packages/create-bison-app/template/components/ErrorText.tsx b/packages/create-bison-app/template/components/ErrorText.tsx
index 2b4a832b..9b36e1df 100644
--- a/packages/create-bison-app/template/components/ErrorText.tsx
+++ b/packages/create-bison-app/template/components/ErrorText.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TextProps } from '@chakra-ui/core';
+import { Text, TextProps } from '@chakra-ui/react';
 
 /** Renders error text under form inputs */
 export function ErrorText({ children, ...textProps }: TextProps) {
diff --git a/packages/create-bison-app/template/components/FullPageSpinner.tsx b/packages/create-bison-app/template/components/FullPageSpinner.tsx
index 9ccf2081..81765ecb 100644
--- a/packages/create-bison-app/template/components/FullPageSpinner.tsx
+++ b/packages/create-bison-app/template/components/FullPageSpinner.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Spinner, Center } from '@chakra-ui/core';
+import { Spinner, Center } from '@chakra-ui/react';
 
 /** Renders a full page loading spinner */
 export function FullPageSpinner() {
diff --git a/packages/create-bison-app/template/components/LoginForm.tsx b/packages/create-bison-app/template/components/LoginForm.tsx
index 77b58aea..3bc39914 100644
--- a/packages/create-bison-app/template/components/LoginForm.tsx
+++ b/packages/create-bison-app/template/components/LoginForm.tsx
@@ -11,7 +11,7 @@ import {
   Stack,
   Button,
   Circle,
-} from '@chakra-ui/core';
+} from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { gql } from '@apollo/client';
 
diff --git a/packages/create-bison-app/template/components/Logo.tsx b/packages/create-bison-app/template/components/Logo.tsx
index 51a629fb..1203a697 100644
--- a/packages/create-bison-app/template/components/Logo.tsx
+++ b/packages/create-bison-app/template/components/Logo.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Heading } from '@chakra-ui/core';
+import { Heading } from '@chakra-ui/react';
 import NextLink from 'next/link';
 
 export function Logo() {
diff --git a/packages/create-bison-app/template/components/Nav.tsx b/packages/create-bison-app/template/components/Nav.tsx
index 9452fcac..5f6850dc 100644
--- a/packages/create-bison-app/template/components/Nav.tsx
+++ b/packages/create-bison-app/template/components/Nav.tsx
@@ -8,7 +8,7 @@ import {
   Menu,
   MenuList,
   MenuItem,
-} from '@chakra-ui/core';
+} from '@chakra-ui/react';
 import NextLink from 'next/link';
 
 export function Nav() {
diff --git a/packages/create-bison-app/template/components/SignupForm.tsx b/packages/create-bison-app/template/components/SignupForm.tsx
index 7cb9b18b..16d872a1 100644
--- a/packages/create-bison-app/template/components/SignupForm.tsx
+++ b/packages/create-bison-app/template/components/SignupForm.tsx
@@ -10,7 +10,7 @@ import {
   Stack,
   Button,
   Circle,
-} from '@chakra-ui/core';
+} from '@chakra-ui/react';
 import { gql } from '@apollo/client';
 import { useForm } from 'react-hook-form';
 import { useRouter } from 'next/router';
diff --git a/packages/create-bison-app/template/layouts/LoggedIn.tsx b/packages/create-bison-app/template/layouts/LoggedIn.tsx
index d788331e..09571226 100644
--- a/packages/create-bison-app/template/layouts/LoggedIn.tsx
+++ b/packages/create-bison-app/template/layouts/LoggedIn.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useRouter } from 'next/router';
-import { Box, Center, Flex, Text, Button } from '@chakra-ui/core';
+import { Box, Center, Flex, Text, Button } from '@chakra-ui/react';
 
 import { Logo } from '../components/Logo';
 import { Nav } from '../components/Nav';
diff --git a/packages/create-bison-app/template/layouts/LoggedOut.tsx b/packages/create-bison-app/template/layouts/LoggedOut.tsx
index 8c3f12c3..11bf30e1 100644
--- a/packages/create-bison-app/template/layouts/LoggedOut.tsx
+++ b/packages/create-bison-app/template/layouts/LoggedOut.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Center, Flex, Text, Button } from '@chakra-ui/core';
+import { Box, Center, Flex, Text, Button } from '@chakra-ui/react';
 import NextLink from 'next/link';
 
 import { Logo } from '../components/Logo';
diff --git a/packages/create-bison-app/template/package.json.ejs b/packages/create-bison-app/template/package.json.ejs
index c1e1953f..8763a526 100644
--- a/packages/create-bison-app/template/package.json.ejs
+++ b/packages/create-bison-app/template/package.json.ejs
@@ -42,8 +42,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.0.2",
-    "@chakra-ui/core": "^1.0.0-rc.5",
-    "@chakra-ui/theme": "^1.0.0-rc.5",
+    "@chakra-ui/react": "1.3.4",
+    "@chakra-ui/theme": "1.7.1",
     "@nexus/schema": "^0.16.0",
     "@prisma/client": "2.8.1",
 <% if (host.name === 'vercel') { -%>
@@ -53,7 +53,9 @@
     "apollo-server-express": "^2.18.1",
 <% } -%>
     "bcryptjs": "^2.4.3",
-    "cross-fetch": "^3.0.5",
+    "cross-fetch": "3.0.5",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "framer-motion": "^2.9.4",
     "graphql": "^15.3.0",
     "graphql-scalars": "^1.3.0",
diff --git a/packages/create-bison-app/template/pages/index.tsx b/packages/create-bison-app/template/pages/index.tsx
index c866a147..2cb9f011 100644
--- a/packages/create-bison-app/template/pages/index.tsx
+++ b/packages/create-bison-app/template/pages/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Head from 'next/head';
-import { Heading, Center } from '@chakra-ui/core';
+import { Heading, Center } from '@chakra-ui/react';
 
 function Home() {
   return (