diff --git a/src/app/page.module.css b/src/app/page.module.css
index c531ebb..5e2bfe3 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -6,4 +6,64 @@
   min-height: 100vh;
   font-size: 50px;
   color: white;
+}
+
+.projects
+{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 70%;
+}
+
+.windowContainer
+{
+  width: 280px;
+  background-color: rgb(31, 31, 31);
+  border: 1px solid rgb(113, 113, 113);
+}
+
+.windowOptions
+{
+    display: flex;
+    justify-content: end;
+    background-color: rgb(255, 255, 255);
+    height: 30px;
+    align-items: center;
+    font-size: 15px;
+    position: sticky;
+    top: 0;
+}
+.windowOptions svg
+{
+    width: 25px;
+    height: 30px;
+    padding: 0 10px; 
+    color: rgb(142, 142, 142);
+}
+.windowOptions svg:nth-last-child(1):hover
+{
+    background-color: red;
+}
+
+.windowOptions svg:hover
+{
+    background-color: rgb(177, 177, 177);
+    color: white;
+}
+
+.windowOptions article
+{
+    width: 110px;
+    display: flex;
+}
+
+.windowContent
+{
+    font-size: 15px;
+    color: rgb(114, 114, 114);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 180px;
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7339d21..05cc65a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,6 +4,7 @@ import { Metadata } from 'next'
 import  Terminal  from '@/components/Terminal'
 import Typewriter from '@/components/Typewriter'
 import localFont from 'next/font/local'
+import { ChevronRight, X, Minus, Square } from 'lucide-react';
 
 const dotFont = localFont({ src: './e-dot-digital-7.ttf' })
 
@@ -12,6 +13,40 @@ export default function Home() {
     <main className={styles.main}>
       <Typewriter text={'  Front-End Developer'}/> {/* TODO What is wrong with the position 1? */}
       <Terminal/>
+      <h1 className={dotFont.className}>Projects</h1>
+      <div className={styles.projects}>
+          <div className={styles.windowContainer}>
+              <section className={styles.windowOptions}>
+                  <article>
+                      <Minus />
+                      <Square />
+                      <X />
+                  </article>
+              </section>
+              <section className={styles.windowContent}>404</section>
+          </div>
+          <div className={styles.windowContainer}>
+              <section className={styles.windowOptions}>
+                  <article>
+                      <Minus />
+                      <Square />
+                      <X />
+                  </article>
+              </section>
+              <section className={styles.windowContent}>404</section>
+          </div>
+          <div className={styles.windowContainer}>
+              <section className={styles.windowOptions}>
+                  <article>
+                      <Minus />
+                      <Square />
+                      <X />
+                  </article>
+              </section>
+              <section className={styles.windowContent}>404</section>
+          </div>
+      </div>
+      <h1 className={dotFont.className}>Social Media</h1>
     </main>
   )
 }
diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx
index 7d0e4b8..b70dd73 100644
--- a/src/components/Terminal.tsx
+++ b/src/components/Terminal.tsx
@@ -65,7 +65,7 @@ const Terminal = () => {
     }, [output]);
     
     return (
-        <div  ref={preRef} className={styles.terminal}>
+        <div className={styles.windowContainer}>
             <section className={styles.windowOptions}>
                 <article>
                     <Minus />
@@ -73,48 +73,50 @@ const Terminal = () => {
                     <X />
                 </article>
             </section>
-            {<pre className={styles.history}>{output}</pre>}
-            {/* <pre style={{ color: 'green' }}>{output}</pre>*/}
-            <section className={styles.prompt}>
-                <article>@guest from portfolio</article>
-                <article className={styles.promptDown}>
-                    <ChevronRight />
-                    <input 
-                        type="text" 
-                        value={input} 
-                        onChange={e=>setInput(e.target.value)}
-                        onKeyDown={e=>{
-                            let newOutput = "";
-                            if (e.key === "Enter")
-                            {
-                                newOutput = output + "\n\n@guest from portfolio\n" + "> " + input + "\n\n";
-                                switch (input)
+            <div  ref={preRef} className={styles.terminal}>
+                {<pre className={styles.history}>{output}</pre>}
+                {/* <pre style={{ color: 'green' }}>{output}</pre>*/}
+                <section className={styles.prompt}>
+                    <article>@guest from portfolio</article>
+                    <article className={styles.promptDown}>
+                        <ChevronRight />
+                        <input 
+                            type="text" 
+                            value={input} 
+                            onChange={e=>setInput(e.target.value)}
+                            onKeyDown={e=>{
+                                let newOutput = "";
+                                if (e.key === "Enter")
                                 {
-                                    case "banner":
-                                        newOutput += banner.join('\n')
-                                        break;
-                                    case "help":
-                                        newOutput += help.join('\n')
-                                        break;
-                                    case "skills":
-                                        newOutput += skills.join('\n')
-                                        break;
-                                    case "info":
-                                        newOutput += info.join('\n')
-                                        break;
-                                    case "cls":
-                                        newOutput = ""
-                                        break;
-                                    default:
-                                        newOutput += "x_x Syntax Error \"" + input + "\" is not a command"
+                                    newOutput = output + "\n\n@guest from portfolio\n" + "> " + input + "\n\n";
+                                    switch (input)
+                                    {
+                                        case "banner":
+                                            newOutput += banner.join('\n')
+                                            break;
+                                        case "help":
+                                            newOutput += help.join('\n')
+                                            break;
+                                        case "skills":
+                                            newOutput += skills.join('\n')
+                                            break;
+                                        case "info":
+                                            newOutput += info.join('\n')
+                                            break;
+                                        case "cls":
+                                            newOutput = ""
+                                            break;
+                                        default:
+                                            newOutput += "x_x Syntax Error \"" + input + "\" is not a command"
+                                    }
+                                    setOutput(newOutput)
+                                    setInput("")
                                 }
-                                setOutput(newOutput)
-                                setInput("")
-                            }
-                        }}
-                    />
-                </article>
-            </section>
+                            }}
+                        />
+                    </article>
+                </section>
+            </div>
         </div>
     )
 };
diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css
index 87940a6..eb9a48d 100644
--- a/src/css/terminal.module.css
+++ b/src/css/terminal.module.css
@@ -1,16 +1,34 @@
+.windowContainer
+{
+    width: 800px;
+    box-sizing: border-box;
+    animation: bottom 2s ease;
+}
 .terminal 
 {
     height: 400px;
-    width: 800px;
+    overflow-Y:auto;
+    overflow-X:hidden;
     background-color: rgb(31, 31, 31);
     color: white;
-    box-sizing: border-box;
     font-size: 15px;
-    overflow-y:auto;
-    overflow-x: hidden;
     border: 1px solid rgb(113, 113, 113);
 }
 
+@keyframes bottom{
+    0%{
+        transform: translateY(500px);
+        opacity: 0%;
+    }
+    75%{
+        transform: translateY(-10px);
+    }
+    100%{
+        transform: translateY(0);
+        opacity: 100%;
+    }
+  }
+
 .windowOptions
 {
     display: flex;
@@ -55,7 +73,7 @@
     /* white-space: pre-wrap;
     word-wrap: break-word; */
     width: 100%;
-    color: rgb(214, 214, 214);
+    color: white;
 }
 
 .prompt