diff --git a/css/details.css b/css/details.css
new file mode 100644
index 0000000..ca6a44e
--- /dev/null
+++ b/css/details.css
@@ -0,0 +1,23 @@
+
+/*
+Divide the Details page into 3 main sections:
+- Head (Picture, Title, Picture gallery & Videos, Price, Details)
+*/
+.details-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: center;
+    padding: 0px 30px;
+    background-color: black;
+    margin-top: 30px;
+    width: 100%;
+}
+
+.details-head {
+    display: flex;
+}
+
+.details-head-image-frame{
+    display: flex;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 7e6e607..739fc65 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
         <link data-trunk type="text/css" href="css/landing.css" rel="css" />
         <link data-trunk type="text/css" href="css/search.css" rel="css" />
         <link data-trunk type="text/css" href="css/project_card.css" rel="css" />
+        <link data-trunk type="text/css" href="css/details.css" rel="css" />
 
 
         <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
diff --git a/src/pages/details.rs b/src/pages/details.rs
index a9101fe..e76df9d 100644
--- a/src/pages/details.rs
+++ b/src/pages/details.rs
@@ -8,7 +8,13 @@ pub fn details_page() -> Html {
         <>
             <NavigationBar/>
             <div class={"page-container"}>
-                
+                <div class={"details-container"}>
+                    <div class={"details-head"}>
+                        <div class={""}>
+                            
+                        </div>
+                    </div>
+                </div>
             </div>
         </>
     }