diff --git a/templates/website/src/components/AdminBar/index.scss b/templates/website/src/components/AdminBar/index.scss
new file mode 100644
index 0000000000..54060c5ba4
--- /dev/null
+++ b/templates/website/src/components/AdminBar/index.scss
@@ -0,0 +1,7 @@
+@import '~@payloadcms/ui/scss';
+
+.admin-bar {
+  @include small-break {
+    display: none;
+  }
+}
diff --git a/templates/website/src/components/AdminBar/index.tsx b/templates/website/src/components/AdminBar/index.tsx
index 452e9c24bf..923e495fdb 100644
--- a/templates/website/src/components/AdminBar/index.tsx
+++ b/templates/website/src/components/AdminBar/index.tsx
@@ -8,6 +8,10 @@ import { PayloadAdminBar } from 'payload-admin-bar'
 import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
 
+import './index.scss'
+
+const baseClass = 'admin-bar'
+
 const collectionLabels = {
   pages: {
     plural: 'Pages',
@@ -40,7 +44,7 @@ export const AdminBar: React.FC<{
 
   return (
     <div
-      className={cn('py-2 bg-black text-white', {
+      className={cn(baseClass, 'py-2 bg-black text-white', {
         block: show,
         hidden: !show,
       })}