diff --git a/packages/atoms/availabilitylist/AvailabilityList.tsx b/packages/atoms/availabilitylist/AvailabilityList.tsx
index 302ba67d8b..1eb2f1ce21 100644
--- a/packages/atoms/availabilitylist/AvailabilityList.tsx
+++ b/packages/atoms/availabilitylist/AvailabilityList.tsx
@@ -1,14 +1,28 @@
-import { EmptyScreen } from " ./EmptyScreen";
+import { Clock } from "@calcom/ui/components/icon";
 
-export function AvailabilityList({ schedules }: []) {
+import { EmptyScreen } from "./EmptyScreen";
+
+export function AvailabilityList({ schedules }: { schedules: [] }) {
   return (
     <>
       {schedules.length === 0 ? (
         <div>
-          <EmptyScreen className="w-full" />
+          <EmptyScreen
+            Icon={Clock}
+            headline="Create an availability schedule"
+            subtitle="Creating availability schedules allows you to manage availability across event types. They can be applied to one or more event types."
+            className="w-full"
+          />
         </div>
       ) : (
-        <div>Render availability list here</div>
+        <div>
+          Render availability list here
+          <div>
+            {schedules.map((schedule) => (
+              <h1 key={schedule?.id}>Hi</h1>
+            ))}
+          </div>
+        </div>
       )}
     </>
   );