diff --git a/index.html b/index.html
index 8eafba8..c3c4ff4 100644
--- a/index.html
+++ b/index.html
@@ -64,6 +64,7 @@
   .face-orange { background: #f97316; }
   .face-blue   { background: #3b82f6; }
   .face-green  { background: #22c55e; }
+  .face-black  { background: #1a1a1a; }
   
   .face-front  { transform: rotateY(0deg) translateZ(48px); }
   .face-back   { transform: rotateY(180deg) translateZ(48px); }
@@ -332,7 +333,18 @@ let isDragging = false;
 let lastMouseX = 0;
 let lastMouseY = 0;
 
-function createCubie(x, y, z) {
+function getCubieColors(x, y, z) {
+  const colors = {};
+  if (z === 1) colors.front = COLORS.RED;
+  if (z === -1) colors.back = COLORS.ORANGE;
+  if (x === 1) colors.right = COLORS.BLUE;
+  if (x === -1) colors.left = COLORS.GREEN;
+  if (y === 1) colors.top = COLORS.WHITE;
+  if (y === -1) colors.bottom = COLORS.YELLOW;
+  return colors;
+}
+
+function createCubie(x, y, z, colors) {
   const cubie = document.createElement('div');
   cubie.className = 'cubie';
   cubie.dataset.x = x;
@@ -341,7 +353,8 @@ function createCubie(x, y, z) {
   
   FACES.forEach(face => {
     const faceEl = document.createElement('div');
-    faceEl.className = `face face-${face} face-${FACE_COLORS[face]}`;
+    const colorName = colors[face] || 'black';
+    faceEl.className = `face face-${face} face-${colorName}`;
     if (face === 'front')  faceEl.style.transform = 'rotateY(0deg) translateZ(48px)';
     if (face === 'back')   faceEl.style.transform = 'rotateY(180deg) translateZ(48px)';
     if (face === 'right')  faceEl.style.transform = 'rotateY(90deg) translateZ(48px)';
@@ -372,11 +385,12 @@ function initCube() {
     for (let y = -1; y <= 1; y++) {
       cube[x + 1][y + 1] = [];
       for (let z = -1; z <= 1; z++) {
-        const cubie = createCubie(x, y, z);
+        const colors = getCubieColors(x, y, z);
+        const cubie = createCubie(x, y, z, colors);
         cube[x + 1][y + 1][z + 1] = {
           element: cubie,
           x, y, z,
-          colors: { ...FACE_COLORS }
+          colors: { ...colors }
         };
         cubeEl.appendChild(cubie);
       }