diff --git a/components/haditha/CardList.vue b/components/haditha/CardList.vue
index 6273167..b156171 100644
--- a/components/haditha/CardList.vue
+++ b/components/haditha/CardList.vue
@@ -33,6 +33,7 @@ const goToLibraryShow = (item) => {
   <UCard
     v-if="props.list?.length"
     v-for="(item, index) in props.list"
+     class="mx-auto"
     :key="index"
     variant="solid"
     :ui="{
diff --git a/pages/haditha/library/index.vue b/pages/haditha/library/index.vue
index e5d7c52..df5142b 100644
--- a/pages/haditha/library/index.vue
+++ b/pages/haditha/library/index.vue
@@ -120,7 +120,10 @@ const CardList = defineAsyncComponent(
           <img fit="auto" quality="80" src="/img/haditha/haditha-title.svg" />
         </div>
 
-        <div ref="el" class="library-list grid grid-cols-5 gap-x-28 gap-y-12">
+        <div
+          ref="el"
+          class="library-list grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-3 md:gap-x-28 md:gap-y-12 lg:grid-cols-5 lg:gap-x-28 lg:gap-y-12 mx-6"
+        >
           <!-- Client-side loaded content -->
           <card-list
             v-if="loadedItems.length"
@@ -148,6 +151,7 @@ const CardList = defineAsyncComponent(
   background: #f7fffd;
 
   .library-list-contianer {
+    height: 100%;
     margin-top: 10em;
     max-width: 1200px;
     width: 100%;
@@ -186,9 +190,18 @@ const CardList = defineAsyncComponent(
   }
 }
 
-@media screen and (max-width: 719.99px) {
+@media screen and (max-width: 991.99px) {
   .search-box-container {
-  padding-top: 0em;
-}
+    padding-top: 0em;
+  }
+  .library-list {
+    height: calc(100dvh - 13em);
+  }
+
+  .page-header {
+    margin-top: 4em;
+    margin-right: 2em;
+    margin-bottom: 1em;
+  }
 }
 </style>