diff --git a/css/style.css b/css/style.css
index 2244666..edea74e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -29,6 +29,13 @@ img {
     max-width: 800px;
 }
 
+.logoimg {
+    width: fit-content;
+    margin: 0 1em;
+    max-width: 250px;
+    padding: 15px;
+}
+
 a:link {
     cursor: pointer;
     color: #36c;
@@ -110,6 +117,7 @@ footer {
     color: linear-gradient(white,blue,red);
 }
 
+
 .divp {
     display: flex;
     flex-direction: column;
@@ -140,6 +148,12 @@ pre {
     border-radius: 4px;
 }
 
+#divlogoimg {
+    margin: 0 auto;
+    max-width: 300px;
+    width: 92%;
+}
+
 #bggradient {
     display: flex;
     flex-direction: column;
diff --git a/index.html b/index.html
index 0f946a0..18136f3 100644
--- a/index.html
+++ b/index.html
@@ -15,10 +15,17 @@
         <!--[if lt IE 7]>
             <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
+        <header>
+            <div id="divlogoimg">
+                <img class="logoimg" src="./media/logo.png">
+            </div>
+        </header>
         
         <h1 class="title">tew-0x00</h1>
         <h3 class="subtitle"> &gt CSS DEMO &lt </h3>
-        <p>Hello friend. This page tries to demonstrate basic CSS3 functionality.
+        <p>
+            Hello friend.<br>
+            This page tries to demonstrate basic CSS3 functionality.
             <ul >
                 <li><a href="./pages/roundedcorners.html">CSS3 rounded corners</a></li>
                 <li><a href="./pages/backgroundgradient.html">CSS3 background gradient</a></li>
diff --git a/media/logo.png b/media/logo.png
new file mode 100644
index 0000000..b830bd5
Binary files /dev/null and b/media/logo.png differ
diff --git a/pages/backgroundgradient.html b/pages/backgroundgradient.html
index e00e076..815eff3 100644
--- a/pages/backgroundgradient.html
+++ b/pages/backgroundgradient.html
@@ -13,7 +13,12 @@
         <link rel="stylesheet" type="text/css" href="../css/prism.css" data-noprefix/>
     </head>
     <body>
-        <h2 class="subtitle"> &gt CSS DEMO &lt </h2>
+        <header>
+            <div id="divlogoimg">
+                <img class="logoimg" src="../media/logo.png">
+            </div>
+        </header>
+
         <h3 class="title">background gradient</h3>
 
         <div id="divsection">
diff --git a/pages/roundedcorners.html b/pages/roundedcorners.html
index 29ce05c..3b15bb1 100644
--- a/pages/roundedcorners.html
+++ b/pages/roundedcorners.html
@@ -13,7 +13,12 @@
         <link rel="stylesheet" type="text/css" href="../css/prism.css" data-noprefix/>
     </head>
     <body>
-        <h2 class="subtitle"> &gt CSS DEMO &lt </h2>
+        <header>
+            <div id="divlogoimg">
+                <img class="logoimg" src="../media/logo.png">
+            </div>
+        </header>
+
         <h3 class="title">rounded corners</h3>
 
         <div id="divsection">
diff --git a/pages/shadows.html b/pages/shadows.html
index fad49c7..a72c4df 100644
--- a/pages/shadows.html
+++ b/pages/shadows.html
@@ -13,7 +13,12 @@
         <link rel="stylesheet" type="text/css" href="../css/prism.css" data-noprefix/>
     </head>
     <body>
-        <h2 class="subtitle"> &gt CSS DEMO &lt </h2>
+        <header>
+            <div id="divlogoimg">
+                <img class="logoimg" src="./media/logo.png">
+            </div>
+        </header>
+
         <h3 class="title">shadows</h3>
 
         <footer class="copyright">
