home page - grid block UI

src/components/home/Home.module.scss

@@ -270,4 +270,73 @@ $block-padding: 0 2rem;
             margin-top: 1rem;
         }
     }
+}
+
+
+.Grid {
+    padding: #{$block-padding};
+
+    ul {
+        list-style: none;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    li {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 2rem 0;
+
+        &:nth-child(1) .icon {
+            background-color: var(--orange);
+        }
+
+        &:nth-child(2) .icon {
+            background-color: var(--blue);
+        }
+
+        &:nth-child(3) .icon {
+            background-color: var(--red);
+        }
+
+        &:nth-child(4) .icon {
+            background-color: var(--teal);
+        }
+    }
+
+    .icon {
+        width: 4rem;
+        height: 4rem;
+        background-color: var(--grey);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 1rem;
+
+        svg {
+            fill: white;
+            width: 3rem;
+        }
+    }
+
+    .info {
+        width: calc(100% - 5rem);
+
+        label, span {
+            display: block;
+        }
+
+        label {
+            font-size: 1.2rem;
+            color: var(--black);
+            font-weight: 700;
+        }
+
+        span {
+            font-size: 1rem;
+            color: var(--grey);
+            font-weight: 500;
+        }
+    }
 }

src/components/home/Home.tsx

@@ -194,7 +194,7 @@ export const Home: React.FC = () => {
                     <GridIcon />
                     Categories
                 </h4>
-                <button>
+                <button className={styles.expandButton}>
                     <ExpandIcon />
                 </button>
                 <button>
@@ -206,29 +206,37 @@ export const Home: React.FC = () => {
                     <div className={styles.icon}>
                         <TimeIcon />
                     </div>
-                    <label> Vocabulary </label>
-                    <span> 5 Shelves </span>
+                    <div className={styles.info}>
+                        <label> Vocabulary </label>
+                        <span> 5 Shelves </span>
+                    </div>
                 </li>
                 <li>
                     <div className={styles.icon}>
                         <BookMarkIcon />
                     </div>
-                    <label> Books </label>
-                    <span> 3 Shelves </span>
+                    <div className={styles.info}>
+                        <label> Books </label>
+                        <span> 3 Shelves </span>
+                    </div>                    
                 </li>
                 <li>
                     <div className={styles.icon}>
                         <PersonSpeakerIcon />
                     </div>
-                    <label> IELTS </label>
-                    <span> 5 Shelves </span>
+                    <div className={styles.info}>
+                        <label> IELTS </label>
+                        <span> 5 Shelves </span>
+                    </div>                    
                 </li>
                 <li>
                     <div className={styles.icon}>
                         <BrainIcon />
                     </div>
-                    <label> GRE </label>
-                    <span> 2 Shelves </span>
+                    <div className={styles.info}>
+                        <label> GRE </label>
+                        <span> 2 Shelves </span>
+                    </div>                    
                 </li>
             </ul>
         </section>