diff --git a/index.html b/index.html
index e45f16c..65f71b9 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,16 @@
         margin: 0;
       }
 
+      .app-name {
+        font-family: "Source Sans Pro", sans-serif;
+        font-size: 36px;
+      }
+
       body {
         margin-top: 48px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
       }
 
       #logo {
@@ -30,6 +38,11 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        grid-area: main;
+      }
+
+      #pan-container {
+        padding: 20px;
       }
 
       .brand-name {
@@ -45,6 +58,45 @@
         transform: scaleX(-1);
       }
 
+      .container {
+        width: 1280px;
+        display: grid;
+        grid-template-columns: 256px 1fr 256px;
+        grid-template-rows: 290px 290px 290px;
+        gap: 24px 0px;
+        grid-auto-flow: row;
+        grid-template-areas:
+          "app1 main app2"
+          ". main app3"
+          ". main .";
+      }
+
+      .app {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid black;
+        gap: 24px;
+        height: 290px;
+        opacity: 0.3;
+      }
+
+      .app1 {
+        grid-area: app1;
+        padding: 20px 0;
+      }
+
+      .app2 {
+        grid-area: app2;
+        padding: 20px 0;
+      }
+
+      .app3 {
+        grid-area: app3;
+        padding: 20px 0;
+      }
+
       @media (prefers-color-scheme: light) {
         #logo {
           border: 1px solid black;
@@ -55,25 +107,45 @@
     <title>Vite + TS</title>
   </head>
   <body>
-    <div id="logo-container">
-      <div id="pan-container" style="padding: 20px">
-        <div id="logo">
-          <div id="brand-reversed" class="brand-name reverse">
-            <p>A</p>
-            <p>C</p>
-            <p>A</p>
-            <p>Y</p>
-            <p>İ</p>
-            <p>P</p>
-          </div>
-          <img width="624" height="624" src="/acayip-logo.png" />
-          <div id="brand" class="brand-name">
-            <p>A</p>
-            <p>C</p>
-            <p>A</p>
-            <p>Y</p>
-            <p>İ</p>
-            <p>P</p>
+    <div class="container">
+      <div class="app1">
+        <div class="app">
+          <img src="/ikon.png" height="128px" width="128px" />
+          <p class="app-name">Blog</p>
+        </div>
+      </div>
+      <div class="app2">
+        <div class="app">
+          <img src="/ikon.png" height="128px" width="128px" />
+          <p class="app-name">Blog</p>
+        </div>
+      </div>
+      <div class="app3">
+        <div class="app">
+          <img src="/ikon.png" height="128px" width="128px" />
+          <p class="app-name">Blog</p>
+        </div>
+      </div>
+      <div id="logo-container">
+        <div id="pan-container">
+          <div id="logo">
+            <div id="brand-reversed" class="brand-name reverse">
+              <p>A</p>
+              <p>C</p>
+              <p>A</p>
+              <p>Y</p>
+              <p>İ</p>
+              <p>P</p>
+            </div>
+            <img width="624" height="624" src="/acayip-logo.png" />
+            <div id="brand" class="brand-name">
+              <p>A</p>
+              <p>C</p>
+              <p>A</p>
+              <p>Y</p>
+              <p>İ</p>
+              <p>P</p>
+            </div>
           </div>
         </div>
       </div>
diff --git a/public/fonts/SourceSansPro-Semibold.otf.woff b/public/fonts/SourceSansPro-Semibold.otf.woff
new file mode 100644
index 0000000..475c499
Binary files /dev/null and b/public/fonts/SourceSansPro-Semibold.otf.woff differ
diff --git a/public/ikon.png b/public/ikon.png
new file mode 100644
index 0000000..3e11b63
Binary files /dev/null and b/public/ikon.png differ
diff --git a/public/style/style.css b/public/style/style.css
index 3f37daf..8851903 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -16,6 +16,11 @@
   src: url(/fonts/SourceCodePro-Black.otf.woff2) format("woff2");
 }
 
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url(/fonts/SourceSansPro-Semibold.otf.woff) format("woff");
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
