diff --git a/index.html b/index.html
index fd06512..0806e29 100644
--- a/index.html
+++ b/index.html
@@ -106,9 +106,9 @@
                   <div class="carousel-container">
                     <div class="carousel-header">Community Screenshots</div>
                     <div class="carousel-view">
-                      <button class="carousel-arrow left">&lt;</button>
+                      <button class="carousel-arrow left">L</button>
                       <img src="/Community/image.png" class="carousel-img">
-                      <button class="carousel-arrow right">&gt;</button>
+                      <button class="carousel-arrow right">R</button>
                     </div>
                     <div class="carousel-footer">See more in Discord</div>
                   </div>
diff --git a/src/style.css b/src/style.css
index 720042c..7c5933c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -322,10 +322,13 @@ body {
   gap: 15px;
   text-decoration: none;
   color: #fff;
-  font-size: 2rem;
+  font-size: 1.5rem;
   text-shadow: 3px 3px 0 #000;
   position: relative;
   transition: transform 0.05s;
+  text-align: center;
+  line-height: 1.1;
+  padding: 0 15px;
 }
 
 .main-btn:hover {
@@ -371,51 +374,77 @@ body {
 }
 
 .screenshot-carousel {
-  background: #000;
-  border: 3px solid #7c7c7c;
-  padding: 8px;
+  background: #1a1a1a;
+  border: 4px solid #7c7c7c;
+  border-right-color: #262626;
+  border-bottom-color: #262626;
+  padding: 4px;
+  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
 }
 
 .carousel-container {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  background: #000;
+  border: 2px solid #1a1a1a;
 }
 
 .carousel-header {
-  font-size: 0.9rem;
-  color: #fff;
+  font-size: 0.85rem;
+  color: #aaa;
   text-align: center;
+  padding: 4px 0;
+  background: #1a1a1a;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
 .carousel-view {
   display: flex;
   align-items: center;
-  gap: 5px;
-  background: #1a1a1a;
+  justify-content: space-between;
+  background: #000;
+  padding: 5px;
+  position: relative;
 }
 
 .carousel-img {
-  width: 140px;
-  height: 80px;
+  width: 180px;
+  height: 100px;
   object-fit: cover;
-  border: 2px solid #555;
+  border: 4px solid #3c3c3c;
+  outline: 2px solid #1a1a1a;
+  transition: opacity 0.2s;
 }
 
 .carousel-arrow {
-  background: transparent;
-  border: none;
+  background: rgba(255,255,255,0.1);
+  border: 2px solid #3c3c3c;
   color: #fff;
   cursor: pointer;
-  font-size: 1.2rem;
+  font-size: 1rem;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-pixel);
+}
+
+.carousel-arrow:hover {
+  background: var(--highlight-yellow);
+  color: #000;
+  border-color: #fff;
 }
 
 .carousel-footer {
-  font-size: 0.9rem;
-  color: #fff;
+  font-size: 0.8rem;
+  color: #0bda51;
   text-align: center;
-  background: #2a2a2a;
-  padding: 2px 0;
+  background: #1a1a1a;
+  padding: 4px 0;
+  border-top: 2px solid #000;
+  font-weight: bold;
 }
 
 .menu-footer {