diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/images/image_67232001.JPG b/images/image_67232001.JPG
new file mode 100644
index 00000000..69417e6c
Binary files /dev/null and b/images/image_67232001.JPG differ
diff --git a/images/twitter_logo.png b/images/twitter_logo.png
new file mode 100644
index 00000000..cf2e6cff
Binary files /dev/null and b/images/twitter_logo.png differ
diff --git a/images/twitter_main.png b/images/twitter_main.png
new file mode 100644
index 00000000..48e9641e
Binary files /dev/null and b/images/twitter_main.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..56d2f0f2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+    <link rel="stylesheet" href="/twitter.css">
+
+    
+</head>
+<body>
+    <div class="container">
+        <div class="left-sidebar">
+            <div class="profile-info">
+                <img src="/images/twitter_main.png" alt="Profile" class="profile-pic">
+                <h3>@chuks149</h3>
+            </div>
+            <ul class="navigation">
+                <li><i class="fa fa-home"></i> Home</li>
+                <li><i class="fa fa-hashtag"></i> Explore</li>
+                <li><i class="fa fa-bell"></i> Notifications</li>
+                <li><i class="fa fa-envelope"></i> Messages</li>
+                <li><i class="fa fa-bookmark"></i> Bookmarks</li>
+                <li><i class="fa fa-user"></i> Profile</li>
+                <li><i class="fa fa-ellipsis-h"></i> More</li>
+            </ul>
+        </div>
+        <div class="main-content">
+            <div>
+                <h4>Home</h4>
+            </div>
+            <div class="tweet-box">
+                <div class="profile-pic">
+                    <img src="/images/image_67232001.JPG" alt="Profile Picture">
+                </div>
+                <textarea placeholder="What's happening?"></textarea>
+                <div class="icon-container">
+                    <i class="fas fa-camera"></i> 
+                    <i class="fas fa-gift"></i> 
+                    <i class="fas fa-chart-bar"></i> 
+                    <i class="fas fa-smile"></i> 
+                    <i class="fas fa-globe-americas"></i>
+                </div>                
+                <button>Tweet</button>
+            </div>
+            <div class="tweets-list">
+                <div>
+                    <h3>Nicolas @MinimumViablePerson</h3>
+                    <p>me as an engineer, 2015: the CEOs vision is so hand-wavey  -25m</p>
+                    <div class="tweet-interactions">
+                        <i class="far fa-comment"></i> 
+                        <i class="fas fa-retweet"></i> 
+                        <i class="far fa-heart"></i> 
+                        <i class="fas fa-share-alt"></i> 
+                    </div>
+                    
+                </div>
+                <div>
+                    <h3>Nicolas @MinimumViablePerson</h3>
+                    <p>me as an engineer, 2015: the CEOs vision is so hand-wavey</p>
+                    <div class="tweet-interactions">
+                        <i class="far fa-comment"></i> 
+                        <i class="fas fa-retweet"></i> 
+                        <i class="far fa-heart"></i> 
+                        <i class="fas fa-share-alt"></i> 
+                    </div>
+                    
+                </div>
+            </div>
+        </div>
+        <div class="right-sidebar">
+            <div class="search-bar">
+                <input type="text" placeholder="Search Twitter">
+            </div>
+            <div class="trends">
+                <button>What's happening</button>
+            </div>
+            <div class="network">
+                <button>Who to follow</button>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/twitter.css b/twitter.css
new file mode 100644
index 00000000..8d5bf633
--- /dev/null
+++ b/twitter.css
@@ -0,0 +1,133 @@
+<style>
+        body, html {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: 300px auto 300px;
+    grid-template-areas: "left main right";
+    height: 100vh;
+}
+
+.left-sidebar {
+    grid-area: left;
+    background-color: #eee;
+    padding: 20px;
+}
+
+.profile-info {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.profile-pic {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.main-content {
+    grid-area: main;
+    padding: 20px;
+}
+
+.tweet-box textarea {
+    width: 100%;
+    margin-bottom: 10px;
+    border-color: pink;
+}
+
+.profile-pic img {
+    width: 50px; 
+    height: 50px;
+    border-radius: 50%; 
+    margin-right: 10px; 
+}
+.right-sidebar {
+    grid-area: right;
+    padding: 20px;
+    background-color: #fafafa;
+}
+
+.search-bar input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    background-color: pink;
+}
+.trends , .network {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    background-color: pink;
+}
+
+@media (max-width: 768px) {
+    .container {
+        grid-template-columns: 1fr;
+        grid-template-areas: 
+            "main"
+            "left"
+            "right";
+    }
+
+    .left-sidebar, .right-sidebar {
+        display: none;
+    }
+}
+
+.icon-container {
+    display: flex;
+    align-items: center;
+}
+
+.icon-container i {
+    color: #c0c0c0; 
+    font-size: 20px; 
+    margin-right: 10px; 
+}
+.icon-container i:hover {
+    color: pink; 
+}
+
+
+.tweet-interactions {
+    display: flex;
+    align-items:center;
+    justify-content: space-around; 
+    padding: 8px 0; 
+}
+
+.tweet-interactions i {
+    color: #657786; 
+    font-size: 15px; 
+    cursor:pointer; 
+}
+
+.tweet-interactions i:hover {
+    color: pink; 
+}
+
+
+.navigation li {
+    padding: 10px;
+    font-size: 16px; 
+    color: #333; 
+    display: flex;
+    align-items: center; 
+}
+
+.navigation li i {
+    margin-right: 10px; 
+}
+
+.navigation li:hover {
+    background-color: #f2f2f2; 
+    cursor: pointer;
+}
+
+</style>
\ No newline at end of file
