diff --git a/front-end/pages/IntroPage.js b/front-end/pages/IntroPage.js
new file mode 100644
index 0000000..7d38878
--- /dev/null
+++ b/front-end/pages/IntroPage.js
@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+
+export default function ClassroomBackground() {
+  const [imageUrl, setImageUrl] = useState('');
+  const [detentionSlipUrl, setDetentionSlipUrl] = useState('');
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    const loadImages = async () => {
+      try {
+        // Load classroom background
+        const bgData = await window.fs.readFile('blurry_classroom.png');
+        const bgBlob = new Blob([bgData], { type: 'blurry_classroom/png' });
+        const bgUrl = URL.createObjectURL(bgBlob);
+        setImageUrl(bgUrl);
+
+        // Load detention slip
+        const slipData = await window.fs.readFile('detention_slip.png');
+        const slipBlob = new Blob([slipData], { type: 'detention_slip/png' });
+        const slipUrl = URL.createObjectURL(slipBlob);
+        setDetentionSlipUrl(slipUrl);
+      } catch (error) {
+        console.error('Error loading images:', error);
+        setError(`Failed to load images: ${error.message}`);
+      }
+    };
+    
+    loadImages();
+  }, []);
+
+  return (
+    <div className="relative w-full h-screen overflow-hidden">
+      {/* Background Image */}
+      {imageUrl && (
+        <div 
+          className="absolute inset-0 bg-cover bg-center"
+          style={{
+            backgroundImage: `url(${imageUrl})`,
+          }}
+        />
+      )}
+      
+      {/* Error message */}
+      {error && (
+        <div className="absolute top-4 left-1/2 transform -translate-x-1/2 bg-red-500 text-white px-6 py-3 rounded-lg z-20">
+          {error}
+        </div>
+      )}
+      
+      {/* Detention Slip Overlay */}
+      <div className="relative z-10 flex items-center justify-center h-full p-8">
+        {detentionSlipUrl && (
+          <img 
+            src={detentionSlipUrl} 
+            alt="Detention Slip" 
+            className="max-w-4xl w-full h-auto shadow-2xl"
+          />
+        )}
+        {!detentionSlipUrl && !error && (
+          <div className="text-white text-xl">Loading images...</div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/front-end/pages/_app.js b/front-end/pages/_app.js
index 00eca57..1e1980a 100644
--- a/front-end/pages/_app.js
+++ b/front-end/pages/_app.js
@@ -7,6 +7,8 @@ import "@/styles/classroom.css";
 import "@/styles/FlipBook.css";
 import "@/styles/FlipPage.css";
 import "@/styles/Summary.css";
+import "@/styles/detentionslip.css";
+import "@/styles/index.css";
 
 export default function App({ Component, pageProps }) {
   return (
@@ -16,4 +18,4 @@ export default function App({ Component, pageProps }) {
       </main>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/front-end/pages/book.js b/front-end/pages/book.js
index e6fb884..062d76d 100644
--- a/front-end/pages/book.js
+++ b/front-end/pages/book.js
@@ -105,155 +105,44 @@ export default function BookPage() {
         </span>
         <span className="page turn page-5">:3</span>
         <span className="cover"></span>
-        <span className="page page-6">Page 5</span>
-        <span className="page page-7">Page 4</span>
-        <span className="page page-8">
-          Page 3
-          {bookmarks
-            .filter((b) => b.page === 8)
-            .map((b, i) => (
-              <div
-                key={i}
-                onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
-                className={`bookmark-container bookmark ${
-                  bookFullscreen
-                    ? "opacity-100"
-                    : "pointer-events-none opacity-0"
-                }`}
-                style={{
-                  top: b.y,
-                }}
-              >
-                <svg viewBox="0 0 300 100" preserveAspectRatio="none">
-                  <polygon
-                    points="0,0 260,0 300,50 260,100 0,100"
-                    fill="#77425f"
-                    stroke="#5a2f49"
-                    strokeWidth="1"
-                  />
-                  <polygon
-                    points="5,5 255,5 296,50 254,95 5,95"
-                    fill="none"
-                    stroke="white"
-                    strokeWidth="2"
-                    strokeDasharray="8,6"
-                  />
-                  <text
-                    x="150"
-                    y="58"
-                    textAnchor="middle"
-                    fill="white"
-                    fontWeight="bold"
-                    fontFamily="sans-serif"
-                  >
-                    {b.label}
-                  </text>
-                </svg>
-              </div>
-            ))}
-        </span>
-        <span className="page page-9">
-          Page 2
-          {bookmarks
-            .filter((b) => b.page === 9)
-            .map((b, i) => (
-              <div
-                key={i}
-                onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
-                className={`bookmark-container bookmark ${
-                  bookFullscreen
-                    ? "opacity-100"
-                    : "pointer-events-none opacity-0"
-                }`}
-                style={{
-                  top: b.y,
-                }}
-              >
-                <svg viewBox="0 0 300 100" preserveAspectRatio="none">
-                  <polygon
-                    points="0,0 260,0 300,50 260,100 0,100"
-                    fill="#77425f"
-                    stroke="#5a2f49"
-                    strokeWidth="1"
-                  />
-                  <polygon
-                    points="5,5 255,5 296,50 254,95 5,95"
-                    fill="none"
-                    stroke="white"
-                    strokeWidth="2"
-                    strokeDasharray="8,6"
-                  />
-                  <text
-                    x="150"
-                    y="58"
-                    textAnchor="middle"
-                    fill="white"
-                    fontWeight="bold"
-                    fontFamily="sans-serif"
-                  >
-                    {b.label}
-                  </text>
-                </svg>
-              </div>
-            ))}
-        </span>
-        <span className="page page-10">
-          <span className="page-text">Placeholder Text</span>
-          {bookmarks
-            .filter((b) => b.page === 10)
-            .map((b, i) => (
-              <div
-                key={i}
-                onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
-                className={`bookmark-container bookmark ${
-                  bookFullscreen
-                    ? "opacity-100"
-                    : "pointer-events-none opacity-0"
-                }`}
-                style={{
-                  top: b.y,
-                }}
-              >
-                <svg viewBox="0 0 300 100" preserveAspectRatio="none">
-                  <polygon
-                    points="0,0 260,0 300,50 260,100 0,100"
-                    fill="#77425f"
-                    stroke="#5a2f49"
-                    strokeWidth="1"
-                  />
-                  <polygon
-                    points="5,5 255,5 296,50 254,95 5,95"
-                    fill="none"
-                    stroke="white"
-                    strokeWidth="2"
-                    strokeDasharray="8,6"
-                  />
-                  <text
-                    x="150"
-                    y="58"
-                    textAnchor="middle"
-                    fill="white"
-                    fontWeight="bold"
-                    fontFamily="sans-serif"
-                  >
-                    {b.label}
-                  </text>
-                </svg>
-              </div>
-            ))}
-        </span>
-        <span className="page turn page-11">
-          <span className="flipped-page-content">Placeholder Text</span>
-        </span>
-        <span className="page turn page-12 invisible">
-          <span className="flipped-page-content">Pogg</span>
-        </span>
-        <span className="page turn page-13 invisible">
-          <span className="flipped-page-content">Whoas</span>
-        </span>
-
+        <span className="page">Page 5</span>
+        <span className="page">Page 4</span>
+        <span className="page">Page 3</span>
+        <span className="page">Page 2</span>
+        <span className="page">What if we have a </span>
         <span className="cover turn">Hello</span>
       </div>
+      
+        <div class="bookmark">
+          <svg viewBox="0 0 300 100" preserveAspectRatio="none">
+            <defs>
+              <mask id="cutout">
+               <polygon points="0,0 260,0 300,50 260,100 0,100" fill="white"/>
+              <polygon points="10,10 255,10 290,50 255,90 10,90" fill="black"/>
+              </mask>
+            </defs>
+            <polygon 
+              points="0,0 260,0 300,50 260,100 0,100" 
+              fill="#77425f" 
+              stroke="#5a2f49" 
+              stroke-width="1" />
+            <polygon 
+              points="5,5 255,5 296,50 254,95 5,95" 
+              fill="none" 
+              stroke="white" 
+              stroke-width="2" 
+              stroke-dasharray="8,6" />
+            <text x="150" y="58" text-anchor="middle" fill="white" font-weight="bold" font-family="sans-serif">Bookmark</text>
+          </svg>
+        </div>
+
+      {/* Other components that appear after fullscreen */}
+      <div
+        className={`absolute inset-0 flex items-center justify-center transition-opacity duration-700 ${
+          appFullscreen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+      >
+      </div>
     </section>
   );
 }
diff --git a/front-end/pages/index.js b/front-end/pages/index.js
index 577582e..5be0e4a 100644
--- a/front-end/pages/index.js
+++ b/front-end/pages/index.js
@@ -10,28 +10,33 @@ export default function Home() {
 
   return (
     <section className="fixed left-0 top-0 m-0 flex h-full w-full items-center justify-center overflow-hidden p-0">
-      {/* Top and bottom background layers */}
-      <div className="background-top"></div>
-      <div className="background-bot"></div>
+      {/* Background */}
+      <div className="background_full"></div>
 
       {/* Content */}
-      <div className="z-10 rounded-lg bg-white/80 p-8 text-center shadow-lg">
-        <h1 className="mb-4 text-4xl font-bold text-dark">Welcome!</h1>
-        <div className="mt-2 flex items-center space-x-2">
-          <input
-            type="text"
-            value={inputValue}
-            onChange={handleChange}
-            placeholder="Enter text here"
-            className="flex-1 rounded-lg border p-2 text-dark"
-          />
-          <Link href="/FlipBook" className="text-background hover:underline">
+      <div className="detention_card">
+        <input type="text" className="riotID_box" placeholder="Riot ID">
+        </input>
+        <input type="text" className="tagline_box" placeholder="1234">
+        </input>
+        <input type="number" className="num_games_analyzed_box" placeholder="10">
+        </input>
+          {/* <Link href="/FlipBook" className="text-background hover:underline">
             <button className="rounded-lg bg-[#8b6f4e] px-4 py-2 text-white transition hover:bg-[#73583f]">
               Search
             </button>
-          </Link>
-        </div>
-        <p className="mt-2 text-dark">Current input: {inputValue}</p>
+          </Link> */}
+        <button
+            className="magical-button"
+        >
+            <span className="button-text">Submit</span>
+                <div className="particles">
+                    <span className="particle"></span>
+                    <span className="particle"></span>
+                    <span className="particle"></span>
+                    <span className="particle"></span>
+                </div>
+          </button>
       </div>
     </section>
   );
diff --git a/front-end/public/images/blurry_classroom.png b/front-end/public/images/blurry_classroom.png
new file mode 100644
index 0000000..d6aa245
Binary files /dev/null and b/front-end/public/images/blurry_classroom.png differ
diff --git a/front-end/public/images/detention_slip2.png b/front-end/public/images/detention_slip2.png
new file mode 100644
index 0000000..1bb6997
Binary files /dev/null and b/front-end/public/images/detention_slip2.png differ
diff --git a/front-end/public/images/yuumi_txtbox.png b/front-end/public/images/yuumi_txtbox.png
new file mode 100644
index 0000000..c4f5240
Binary files /dev/null and b/front-end/public/images/yuumi_txtbox.png differ
diff --git a/front-end/styles/button.css b/front-end/styles/button.css
index ab72f4d..6b6dc1b 100644
--- a/front-end/styles/button.css
+++ b/front-end/styles/button.css
@@ -1,5 +1,7 @@
 .magical-button {
-  position: relative;
+  position: absolute;
+  right: 18%;
+  bottom: 13%;
   padding: 12px 28px;
   font-size: 18px;
   font-weight: 600;
diff --git a/front-end/styles/detentionslip.css b/front-end/styles/detentionslip.css
new file mode 100644
index 0000000..d154402
--- /dev/null
+++ b/front-end/styles/detentionslip.css
@@ -0,0 +1,30 @@
+.slip-container {
+  width: 650px;
+  background: linear-gradient(#1a1a1a, #2b2b2b);
+  padding: 30px;
+  border: 6px solid #caa64c;
+  font-family: "Cinzel", serif;
+  color: #e7d18c;
+}
+
+.label-row {
+  margin: 12px 0;
+  font-size: 18px;
+}
+
+.lol-input {
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid #caa64c;
+  color: #caa64c;
+  font-family: "Cinzel", serif;
+  font-size: 18px;
+  width: 250px;
+  outline: none;
+  padding: 3px;
+}
+
+.lol-input::placeholder {
+  color: #b9964d;
+  opacity: 0.7;
+}
\ No newline at end of file
diff --git a/front-end/styles/index.css b/front-end/styles/index.css
new file mode 100644
index 0000000..c90c681
--- /dev/null
+++ b/front-end/styles/index.css
@@ -0,0 +1,82 @@
+.background_full{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    z-index: 0;
+    background-image: url("/images/blurry_classroom.png") !important;
+    background-color: var(--color-primary);
+    background-position: center -100px;
+}
+
+.detention_card{
+    position: relative;
+    width: 910px;
+    height: 700px;
+    background-image: url("/images/detention_slip2.png") !important;
+    background-position: center 50%;
+}
+
+.riotID_box{
+    position: absolute;
+    z-index: 10;
+    top: 22.5%;
+    left: 19%;
+    width: 38%;
+    height: 4%;
+    color: white;
+    background-color: rgb(54, 51, 51);
+    border: solid #8b7355;
+    border-radius: 5px;
+    padding-left: 0.5rem;
+}
+
+.riotID_box::placeholder{
+    color: lightgrey;
+    opacity: 70%;
+}
+
+.tagline_box{
+    position: absolute;
+    z-index: 10;
+    top: 22.5%;
+    left: 73%;
+    width: 15%;
+    height: 4%;
+    color: white;
+    background-color: rgb(54, 51, 51);
+    border: solid #8b7355;
+    border-radius: 5px;
+    padding-left: 0.5rem;
+}
+
+.tagline_box::placeholder{
+    color: lightgrey;
+    opacity: 70%;
+}
+
+.num_games_analyzed_box{
+    position: absolute;
+    z-index: 10;
+    top: 54%;
+    left: 81%;
+    width: 8%;
+    height: 4%;
+    color: white;
+    background-color: rgb(54, 51, 51);
+    border: solid #8b7355;
+    border-radius: 5px;
+    padding-left: 0.5rem;
+}
+
+.num_games_analyzed_box::placeholder{
+    color: lightgrey;
+    opacity: 70%;
+}
+
+
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..0b1f9c8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "riot_api",
+  "version": "1.0.0",
+  "description": "project for Riot x AWS Rift Rewind hackathon",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/syliem1/Rift_Rewind.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/syliem1/Rift_Rewind/issues"
+  },
+  "homepage": "https://github.com/syliem1/Rift_Rewind#readme"
+}