diff --git a/Week-1/Week-1-Webpage/index.html b/Week-1/Week-1-Webpage/index.html
new file mode 100644
index 0000000..4da1f4e
--- /dev/null
+++ b/Week-1/Week-1-Webpage/index.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+    <html>
+        <head>
+            <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
+            <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
+            <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
+            <title>HTML CSS Assihnment</title>
+            <style>
+            body {
+                font-family: 'Lato';
+                font-size: 20px;
+                margin: 0px;
+                min-height: 100%;
+                height: 100vh;
+            }
+            .main-ctn {
+                display: flex;
+                height: 85%;
+            }
+            .sidebar {
+                width: 3%;
+                background-color: lightgray;
+            }
+            .sidebar-icon {
+                margin: 68% 17%;
+            }
+            .page {
+                width: 97%;
+            }
+            .header {
+                display: flex; 
+                background-color: grey;
+                padding: 2%;
+                height: 30%;
+            }
+            .image-ctn {        
+                width: 12%;
+            }
+            .image-ctn img {
+                height: 95%;
+                width: 95%;
+            }
+            .header-content{
+                width: 88%;
+                color: white;
+            }
+            .main-header {
+                font-size: 25px;
+            }
+            .sub-header {
+                margin-top: 4px;
+                font-size: 14px;
+            }
+            .header-icon-ctn {
+                margin-top: 50px;
+            }
+            .small-header {
+                font-size: 10px;
+            }
+            .margin-left {
+                margin-left: 15px;
+            }
+            table {
+                border-collapse: collapse;
+                width: 99%;
+                font-size: 14px;
+                margin: 8px;
+            }
+            td, th {
+                border: 1px solid #dddddd;
+                text-align: left;
+                padding: 10px;
+            }
+            tr:nth-child(even) {
+                background-color: #dddddd;
+            }
+            footer {
+                background-color: blue;
+                color: white;
+                display: flex;
+                padding: 12px;
+                height: 11%;
+            }
+            .foot-img-ctn {
+                width: 5%;
+            }
+            .foot-img-ctn img {
+                height: 100%;
+                width: 100%;
+            }
+            .footer-content {
+                width: 94%;
+                margin-left: 1%;
+                display: flex;
+            }
+            .header-ctn {
+                width: 10%;
+            }
+            .footer-icon-ctn {
+                width: 90%;
+            }
+            .icon-foot {
+                font-size: 25px;
+                margin-left: 20%;
+            }
+            </style>    
+        </head>
+        <body>
+            <div class="main-ctn">
+                <div class="sidebar">
+                    <div class="sidebar-icon"><i class="las la-bars"></i></div>
+                    <div class="sidebar-icon"><i class="las la-home"></i></div>
+                    <div class="sidebar-icon"><i class="las la-search"></i></div>
+                    <div class="sidebar-icon"><i class="las la-volume-up"></i></div>
+                    <div class="sidebar-icon"><i class="las la-user"></i></div>
+                    <div class="sidebar-icon"><i class="las la-cog"></i></div>           
+                    <div class="sidebar-icon"><i class="las la-user"></i></div>
+                    <div class="sidebar-icon"><i class="las la-cog"></i></div>
+                </div>
+                <div class="page">
+                    <div class="header">
+                        <div class="image-ctn">
+                            <img src="https://uploads.codesandbox.io/uploads/user/a8233562-b36b-483d-9de9-5a1ac148fb0c/2Eq--cattyboard.jpg"></img>
+                        </div>
+                        <div class="header-content">
+                            <div class="main-header">CattyBoard Top 100 Single Charts(11.06.36)</div>
+                            <div class="sub-header">Unknown Artist</div>
+                            <div class="sub-header">2016. Charts. 100 Songs</div>
+                            <div class="header-icon-ctn">
+                                <span class="small-header"><i class="las la-play"></i>Play All</span>
+                                <span class="small-header margin-left"><i class="las la-plus"></i>Add to</span>
+                                <span class="small-header margin-left"><i class="las la-ellipsis-h"></i>More</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="page-ctn">
+                            <table>
+                                <tr>
+                                    <td>1. One Dance</td>
+                                    <td>Crake feat CatKid & Cyla</td>
+                                    <td>02:54</td>
+                                    <td><button>CATTY CLOUD SYNC</button></td>
+                                </tr>
+                                <tr>
+                                    <td>2. Panda</td>
+                                    <td>Catte</td>
+                                    <td>04:06</td>
+                                    <td><button>CATTY CLOUD SYNC</button></td>
+                                </tr>                    
+                                <tr>
+                                    <td>3. Can't Stop The Feeling!</td>
+                                    <td>Catin Cimberlake</td>
+                                    <td>03:56</td>
+                                    <td><button>CATTY CLOUD SYNC</button></td>
+                                </tr>                    
+                                <tr>
+                                    <td>4. Work From Home</td>
+                                    <td>Cat Harmony feat Colla</td>
+                                    <td>03:34</td>
+                                    <td><button>CATTY CLOUD SYNC</button></td>
+                                </tr> 
+                            </table>
+                    </div>
+                </div>
+            </div>
+            <footer>
+                <div class="foot-img-ctn">
+                    <img src="https://uploads.codesandbox.io/uploads/user/a8233562-b36b-483d-9de9-5a1ac148fb0c/2Eq--cattyboard.jpg"></img>
+                </div>
+                <div class="footer-content">
+                    <div class="header-ctn">
+                        <div class="sub-header">if It Ain't Love</div>
+                        <div class="small-header">Cartson Derulo</div>
+                    </div>
+                    <div class="footer-icon-ctn">
+                        <span class="icon-foot"><i class="las la-step-backward"></i></span>
+                        <span class="icon-foot"><i class="las la-play"></i></span>
+                        <span class="icon-foot"><i class="las la-step-forward"></i></span>
+                        <span class="icon-foot"><i class="las la-random"></i></span>
+                    </div>
+                </div>
+            </footer>
+        </body>
+    </html>
\ No newline at end of file

1. One Dance	Crake feat CatKid & Cyla	02:54
2. Panda	Catte	04:06
3. Can't Stop The Feeling!	Catin Cimberlake	03:56
4. Work From Home	Cat Harmony feat Colla	03:34