diff --git a/index.html b/index.html
index 99e67ed..d055dbb 100644
--- a/index.html
+++ b/index.html
@@ -56,62 +56,67 @@ <h1 class="text-5xl font-bold">Constrix</h1>
                 experience for the Asian CS1.6 player community and striving to create a unique CS1.6 community in Asia.
             </p>
 
-            <!-- Open the modal using ID.showModal() method -->
-            <button class="btn btn-accent" onclick="my_modal_1.showModal()">Forum</button>
-            <dialog id="my_modal_1" class="modal">
-                <form method="dialog" class="modal-box">
-                    <h2 class="text-3xl mb-5 font-bold">Forum community</h2>
-                    <p class="mb-5">our forum currently making, Coming soon, we will notify you on discord once it is
-                        completed.</p>
-                    <a href="https://forum.constrix.org" class="link link-success mt-5"
-                        target="_blank">https://forum.constrix.org</a>
-                </form>
-                <form method="dialog" class="modal-backdrop">
-                    <button>close</button>
-                </form>
-            </dialog>
+            <div class="grid grid-rows-2 grid-flow-col gap-4">
 
-            <!-- Open the modal using ID.showModal() method -->
-            <button class="btn btn-accent ml-5" onclick="my_modal_2.showModal()">Discord</button>
-            <dialog id="my_modal_2" class="modal">
-                <form method="dialog" class="modal-box">
-                    <h2 class="text-3xl mb-5 font-bold">Discord server</h2>
-                    <p class="mb-5">Join our Discord group:</p>
-                    <a href="https://discord.gg/TBpTHuwZ" class="link link-success mt-5"
-                        target="_blank">https://discord.gg/TBpTHuw</a>
-                </form>
-                <form method="dialog" class="modal-backdrop">
-                    <button>close</button>
-                </form>
-            </dialog>
+                <!-- Open the modal using ID.showModal() method -->
+                <button class="btn btn-accent ml-5" onclick="my_modal_1.showModal()">Forum</button>
+                <dialog id="my_modal_1" class="modal">
+                    <form method="dialog" class="modal-box">
+                        <h2 class="text-3xl mb-5 font-bold">Forum community</h2>
+                        <p class="mb-5">our forum currently making, Coming soon, we will notify you on discord once it
+                            is
+                            completed.</p>
+                        <a href="https://forum.constrix.org" class="link link-success mt-5"
+                            target="_blank">https://forum.constrix.org</a>
+                    </form>
+                    <form method="dialog" class="modal-backdrop">
+                        <button>close</button>
+                    </form>
+                </dialog>
 
-            <!-- Open the modal using ID.showModal() method -->
-            <button class="btn btn-accent ml-5" onclick="my_modal_3.showModal()">Server</button>
-            <dialog id="my_modal_3" class="modal">
-                <form method="dialog" class="modal-box">
-                    <h2 class="text-3xl mb-5 font-bold">Counter-Strike 1.6 Server</h2>
-                    <p>Our server is located in Singapore and our server's main feature is the All-in-One mode.</p>
-                    <p class="text-gray-300 mt-5">IP: <span class="text-orange-500">cs.constrix.org:27015</span></p>
-                </form>
-                <form method="dialog" class="modal-backdrop">
-                    <button>close</button>
-                </form>
-            </dialog>
+                <!-- Open the modal using ID.showModal() method -->
+                <button class="btn btn-accent ml-5" onclick="my_modal_2.showModal()">Discord</button>
+                <dialog id="my_modal_2" class="modal">
+                    <form method="dialog" class="modal-box">
+                        <h2 class="text-3xl mb-5 font-bold">Discord server</h2>
+                        <p class="mb-5">Join our Discord group:</p>
+                        <a href="https://discord.gg/TBpTHuwZ" class="link link-success mt-5"
+                            target="_blank">https://discord.gg/TBpTHuw</a>
+                    </form>
+                    <form method="dialog" class="modal-backdrop">
+                        <button>close</button>
+                    </form>
+                </dialog>
 
-            <!-- Open the modal using ID.showModal() method -->
-            <button class="btn btn-accent ml-5" onclick="my_modal_4.showModal()">Github</button>
-            <dialog id="my_modal_4" class="modal">
-                <form method="dialog" class="modal-box">
-                    <h2 class="text-3xl mb-5 font-bold">Github Source code</h2>
-                    <p class="mb-5">Currently, only the game server is not open source, while all other repository are
-                        fully open source. For more details, you can refer to our GitHub repository.</p>
-                    <a href="https://github.com/Constrix" class="link link-success mt-5"
-                        target="_blank">https://github.com/Constrix</a>
-                </form>
-                <form method="dialog" class="modal-backdrop">
-                    <button>close</button>
-                </form>
-            </dialog>
+                <!-- Open the modal using ID.showModal() method -->
+                <button class="btn btn-accent ml-5" onclick="my_modal_3.showModal()">Server</button>
+                <dialog id="my_modal_3" class="modal">
+                    <form method="dialog" class="modal-box">
+                        <h2 class="text-3xl mb-5 font-bold">Counter-Strike 1.6 Server</h2>
+                        <p>Our server is located in Singapore and our server's main feature is the All-in-One mode.</p>
+                        <p class="text-gray-300 mt-5">IP: <span class="text-orange-500">cs.constrix.org:27015</span></p>
+                    </form>
+                    <form method="dialog" class="modal-backdrop">
+                        <button>close</button>
+                    </form>
+                </dialog>
+
+                <!-- Open the modal using ID.showModal() method -->
+                <button class="btn btn-accent ml-5" onclick="my_modal_4.showModal()">Github</button>
+                <dialog id="my_modal_4" class="modal">
+                    <form method="dialog" class="modal-box">
+                        <h2 class="text-3xl mb-5 font-bold">Github Source code</h2>
+                        <p class="mb-5">Currently, only the game server is not open source, while all other repository
+                            are
+                            fully open source. For more details, you can refer to our GitHub repository.</p>
+                        <a href="https://github.com/Constrix" class="link link-success mt-5"
+                            target="_blank">https://github.com/Constrix</a>
+                    </form>
+                    <form method="dialog" class="modal-backdrop">
+                        <button>close</button>
+                    </form>
+                </dialog>
+            </div>
         </div>
     </div>
 </div>
diff --git a/styles.css b/styles.css
index a7dc796..da409ce 100644
--- a/styles.css
+++ b/styles.css
@@ -4085,6 +4085,42 @@ details.collapse summary::-webkit-details-marker {
   z-index: 1;
 }
 
+.col-span-6 {
+  grid-column: span 6 / span 6;
+}
+
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.col-span-4 {
+  grid-column: span 4 / span 4;
+}
+
+.col-start-1 {
+  grid-column-start: 1;
+}
+
+.col-start-2 {
+  grid-column-start: 2;
+}
+
+.col-end-3 {
+  grid-column-end: 3;
+}
+
+.col-end-4 {
+  grid-column-end: 4;
+}
+
+.col-end-7 {
+  grid-column-end: 7;
+}
+
+.col-end-6 {
+  grid-column-end: 6;
+}
+
 .m-5 {
   margin: 1.25rem;
 }
@@ -4118,6 +4154,10 @@ details.collapse summary::-webkit-details-marker {
   margin-top: 1.25rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .block {
   display: block;
 }
@@ -4162,6 +4202,14 @@ details.collapse summary::-webkit-details-marker {
   height: 1.5rem;
 }
 
+.h-48 {
+  height: 12rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -4186,14 +4234,34 @@ details.collapse summary::-webkit-details-marker {
   width: 100%;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-48 {
+  width: 12rem;
+}
+
 .max-w-md {
   max-width: 28rem;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
 .flex-shrink {
   flex-shrink: 1;
 }
 
+.shrink-0 {
+  flex-shrink: 0;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -4218,6 +4286,46 @@ details.collapse summary::-webkit-details-marker {
   grid-auto-flow: column;
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-rows-4 {
+  grid-template-rows: repeat(4, minmax(0, 1fr));
+}
+
+.grid-rows-1 {
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+}
+
+.grid-rows-2 {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
+.grid-rows-3 {
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -4250,6 +4358,26 @@ details.collapse summary::-webkit-details-marker {
   gap: 1.5rem;
 }
 
+.gap-9 {
+  gap: 2.25rem;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-16 {
+  gap: 4rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -4282,10 +4410,20 @@ details.collapse summary::-webkit-details-marker {
   background-color: transparent;
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .fill-current {
   fill: currentColor;
 }
 
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -4302,6 +4440,10 @@ details.collapse summary::-webkit-details-marker {
   padding: 1.25rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -4363,10 +4505,23 @@ details.collapse summary::-webkit-details-marker {
   line-height: 1.75rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -4375,6 +4530,14 @@ details.collapse summary::-webkit-details-marker {
   text-transform: none;
 }
 
+.leading-tight {
+  line-height: 1.25;
+}
+
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -4405,6 +4568,21 @@ details.collapse summary::-webkit-details-marker {
   color: hsl(var(--pc) / var(--tw-text-opacity));
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-indigo-500 {
+  --tw-text-opacity: 1;
+  color: rgb(99 102 241 / var(--tw-text-opacity));
+}
+
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -4415,6 +4593,12 @@ details.collapse summary::-webkit-details-marker {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .outline {
   outline-style: solid;
 }
@@ -4459,12 +4643,62 @@ details.collapse summary::-webkit-details-marker {
   }
 }
 
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
 @media (min-width: 768px) {
+  .md\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
   .md\:h-6 {
     height: 1.5rem;
   }
 
+  .md\:h-full {
+    height: 100%;
+  }
+
   .md\:w-6 {
     width: 1.5rem;
   }
+
+  .md\:w-32 {
+    width: 8rem;
+  }
+
+  .md\:w-48 {
+    width: 12rem;
+  }
+
+  .md\:max-w-2xl {
+    max-width: 42rem;
+  }
+
+  .md\:shrink-0 {
+    flex-shrink: 0;
+  }
+
+  @media not all and (min-width: 1536px) {
+    .md\:max-2xl\:flex {
+      display: flex;
+    }
+  }
+
+  @media not all and (min-width: 1024px) {
+    .md\:max-lg\:flex {
+      display: flex;
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:w-48 {
+    width: 12rem;
+  }
 }
\ No newline at end of file