diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index d9ff03d..9a5a019 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -14,8 +14,8 @@
     <option name="RECENT_TEMPLATES">
       <list>
         <option value="JavaScript File" />
-        <option value="CSS File" />
         <option value="HTML File" />
+        <option value="CSS File" />
       </list>
     </option>
   </component>
@@ -62,7 +62,7 @@
       <workItem from="1679674448294" duration="3278000" />
       <workItem from="1679754546660" duration="3762000" />
       <workItem from="1679776338023" duration="11768000" />
-      <workItem from="1679841996008" duration="2668000" />
+      <workItem from="1679841996008" duration="4647000" />
     </task>
     <servers />
   </component>
diff --git a/Footerstyle.css b/Footerstyle.css
new file mode 100644
index 0000000..15dcdf9
--- /dev/null
+++ b/Footerstyle.css
@@ -0,0 +1,8 @@
+footer
+{
+    margin-top: 50px;
+    padding: 30px 0;
+    text-align: center;
+    font-size: 20px;
+    background-color: #ffe2c1;
+}
\ No newline at end of file
diff --git a/Icon.png b/Icon.png
new file mode 100644
index 0000000..15ed42c
Binary files /dev/null and b/Icon.png differ
diff --git a/games.html b/games.html
index 1318233..629e5c8 100644
--- a/games.html
+++ b/games.html
@@ -51,7 +51,7 @@
 <div class="contentArea">
 
 
-    <div id="mainPageGames">
+    <div id="mainPageCards">
 
     </div>
 
diff --git a/index.html b/index.html
index 73fcfe7..f7afc88 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="navigationStyle.css">
     <link rel="stylesheet" href="mainPage.css">
+    <link rel="stylesheet" href="Footerstyle.css">
 </head>
 <body onresize="hideMobileMenuBar()">
 
@@ -59,7 +60,7 @@
 
     <h1 style="color: #F7A4A4;">Short overview</h1>
 
-    <div id="mainPageGames">
+    <div class="mainPageCards">
         <div class="color3">
             <h2>We</h2>
             <p>
@@ -76,8 +77,31 @@
             <h2>Coming Soon</h2>
         </div>
     </div>
+
+    <button>Learn More</button>
+
+    <h1 style="color: #F7A4A4">Have a look at our games page</h1>
+
+    <div class="mainPageCards">
+        <div class="flufflPartyCard">
+            <h2>FlufflParty</h2>
+            <p>
+                An online multiplayer party game to have fun with your friends. Cool minigames action and more.
+            </p>
+        </div>
+        <div class="color3">
+            <h2>Coming Soon</h2>
+        </div>
+        <div class="color2">
+            <h2>Coming Soon</h2>
+        </div>
+    </div>
+
+    <button>Visit Games Page</button>
 </div>
 </body>
 
+<footer>IOGameStudios 2023</footer>
+
 <script src="StartPage.js"></script>
 </html>
diff --git a/mainPage.css b/mainPage.css
index 27e8db4..20963f8 100644
--- a/mainPage.css
+++ b/mainPage.css
@@ -53,7 +53,7 @@ h2
     color: #41423f;
 }
 
-#mainPageGames
+.mainPageCards
 {
     display: flex;
     align-items: center;
@@ -62,13 +62,13 @@ h2
 
 @media (max-width: 18cm)
 {
-    #mainPageGames
+    .mainPageCards
     {
         flex-direction: column;
     }
 }
 
-#mainPageGames div
+.mainPageCards div
 {
     min-height: 300px;
     max-height: 300px;
@@ -82,7 +82,7 @@ h2
 
 @media (min-width: 18.1cm)
 {
-    #mainPageGames div
+    .mainPageCards div
     {
         min-width: 30%;
         max-width: 30%;
@@ -91,7 +91,7 @@ h2
 
 @media (max-width: 18cm)
 {
-    #mainPageGames div
+    .mainPageCards div
     {
         min-width: 80%;
         max-width: 80%;
@@ -99,25 +99,34 @@ h2
 
 }
 
-#mainPageGames div h2
+.mainPageCards div h2
 {
     margin-bottom: 40px;
 }
 
-#mainPageGames p
+.mainPageCards p
 {
     color: #41423f;
     text-align: center;
+    font-size: 18px;
 }
 
-#mainPageGames button
+.contentArea button
 {
     margin-top: 20px;
     border-radius: 50px;
     border-style: none;
-    color: #41423f;
+    background-image: linear-gradient(#F7A4A4, #FEBE8C);
     cursor: pointer;
-    padding: 15px;
+    padding: 15px 50px;
+}
+
+.flufflPartyCard
+{
+    background-image: url("Icon.png"), linear-gradient(#F7A4A4, #FEBE8C);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: center;
 }
 
 .imageFull
diff --git a/quicklinks.html b/quicklinks.html
index 7238889..f4117eb 100644
--- a/quicklinks.html
+++ b/quicklinks.html
@@ -50,7 +50,7 @@
 
 <div class="contentArea">
 
-  <div id="mainPageGames">
+  <div id="mainPageCards">
 
   </div>
 
