diff --git a/pages/thai/index.tsx b/pages/thai/index.tsx
index 4ef0d5a..434f77f 100644
--- a/pages/thai/index.tsx
+++ b/pages/thai/index.tsx
@@ -11,6 +11,35 @@ const cardSpinningTimer = {
 };
 
 export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Thai Stuff</title>
+      </Head>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(5, 1fr)',
+        gridTemplateRows: 'repeat(2, 1fr)',
+        width: '100%',
+        gap: 8
+      }}>
+        <FlippyCard />
+        <div className='grey-round' style={{ gridColumn: '2 / span 4' }}>
+          <p></p>
+        </div>
+
+        <div style={{ gridRow: 2, gridColumn: '1 / span 5' }}>
+          <div className='grey-round' style={{ gridColumn: '1 / span 5' }}>
+            <p></p>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+function FlippyCard() {
   const cardRef = useRef<HTMLDivElement>(null)
   const [randomeLetter, setRandomLetter] = useState<LetterType>({
     letter: 'ฮ',
@@ -30,30 +59,24 @@ export default function Home() {
   }
 
   return (
-    <>
-      <Head>
-        <title>Thai Stuff</title>
-      </Head>
-
-      <div className='card' ref={cardRef}>
-        <div>
-          <p>{randomeLetter.letter}</p>
-          <p>{randomeLetter.phono}</p>
-        </div>
-        <div className='buttons'>
-          <button onClick={async () => {
-            console.log("pressed listen")
-          }}>Listen</button>
-          <button onClick={async () => {
-            let k = await _getRandomLetter()
-            while (k == randomeLetter) {
-              k = await _getRandomLetter()
-            }
-            setRandomLetter(k)
-          }}>Next</button>
-        </div>
+    <div className='card grey-round' ref={cardRef}>
+      <div>
+        <p>{randomeLetter.letter}</p>
+        <p>{randomeLetter.phono}</p>
       </div>
-    </>
+      <div className='buttons'>
+        <button onClick={async () => {
+          console.log("pressed listen")
+        }}>Listen</button>
+        <button onClick={async () => {
+          let k = await _getRandomLetter()
+          while (k == randomeLetter) {
+            k = await _getRandomLetter()
+          }
+          setRandomLetter(k)
+        }}>Next</button>
+      </div>
+    </div>
   )
 }
 
diff --git a/styles/thai.css b/styles/thai.css
index 09cf178..9569be2 100644
--- a/styles/thai.css
+++ b/styles/thai.css
@@ -1,22 +1,22 @@
-.card {
-  position: absolute;
-  top: calc(50% - 22rem);
-  left: calc(50% - 9rem);
-  width: 18rem;
-  height: 26rem;
-  padding: 10px;
+.grey-round {
+  padding: 2px;
   background-color: rgba(255, 255, 255, 0.15);
   border-radius: 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: column;
   border-right: 1px solid color(srgb 0.3784 0.4042 0.43);
   border-top: 1px solid color(srgb 0.3784 0.4042 0.43);
 }
 
+.card {
+  width: 10rem;
+  height: 14rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+}
+
 .card > div > p:first-of-type {
-  font-size: 8rem;
+  font-size: 4rem;
   margin: 0;
   color: #bfcedd;
   text-shadow: -4px 3px 7px #121316;
@@ -33,10 +33,10 @@
   justify-content: center;
   align-items: center;
   width: 100%;
-  padding: 0;
+  padding: 4px;
   margin: 0;
   gap: 2px;
-  font-size: 1.6rem;
+  font-size: 0.8rem;
 }
 
 .card > .buttons > button {
