diff --git a/pages/litterall.html b/pages/litterall.html
index a209629..0a2ebdd 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -94,8 +94,16 @@
 				</div>
 			</main>
 			<aside class="relative_content">
-				<div>
-					<h2></h2>
+				<div class="relative_box">
+					<p class="box_name">autres publications</p>
+					<a>
+						<h2>traduire, retraduire</h2>
+						<p>entretien entre frédéric Boyer, Christiane Kayser, et Jean-Philippe Rossignol</p>
+					</a>
+					<a>
+						<h2>traduire, retraduire</h2>
+						<p>entretien entre frédéric Boyer, Christiane Kayser, et Jean-Philippe Rossignol</p>
+					</a>
 				</div>
 			</aside>
 		</div>
diff --git a/styles/global.css b/styles/global.css
index c5f08bc..c3a36cd 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -7,7 +7,7 @@
 	--nav-height: 40px;
 	--base-back-color: white;
 	--aside-left-width: 200px;
-	--aside-right-width: 350px;
+	--aside-right-width: 200px;
 }
 
 
@@ -96,28 +96,29 @@ body nav * {
 	margin: auto;
 	max-height: 100%;
 }
-/*nav_left is used for links to pages*/
+/* nav_left is used for links to pages*/
 body nav .nav_left  {
 	/*we have to set the height to use the height % for childs elements*/
 	height: 100%;
 	margin-left: 0px;
 	margin-right: auto;
 }
-/*nav_right is used for actions such as connection, search or language*/
+/* nav_right is used for actions such as connection, search or language*/
 body nav .nav_right {
 	height: 100%;
 	margin-left: auto;
 	margin-right: 0px;
 }
-/*appearence on hover and click*/
+/* appearence on hover and click*/
 body nav a {
-	padding: 0px 20px;
+	/*gap-unit * 1.5 because there are 2 * (1/2) for aside and (1/2) for main*/
+	padding: 0px calc(var(--gap-unit) * 1.5);
 	height: 100%;
 }
 body nav a:hover, body nav a:focus {
 	background-color: lightgrey;
 }
-/*special settings for the logo*/
+/* special settings for the logo*/
 body nav a.nav_logo {
 	padding: 0px;
 	width: var(--aside-left-width);
@@ -131,8 +132,8 @@ body .container_main {
 /*ASIDE LEFT SUMMARY*/
 /* aside left is for page table of content */
 body aside.page_content {
-	top: calc(var(--nav-height) + var(--gap-unit) + 1px);
-	height: calc(100vh - var(--nav-height) - 2 * var(--gap-unit));
+	top: calc(var(--nav-height) + 1px);
+	height: calc(100vh - var(--nav-height));
 }
 body aside.page_content > * {
 	margin: var(--gap-unit) 0px;
@@ -170,20 +171,30 @@ body main .page_title .date {
 }
 
 /*ASIDE RIGHT RELATIVES*/
-body aside.relative_content > * {
-	margin: var(--gap-unit) 0px;
-}
 /* aside right is for links to relatives content*/
 body aside.relative_content {
+	margin: 10px 30px;
 }
 /* asides elements only have width if they have a child*/
 body aside.relative_content *:first-child {
-	width: 350px;
+	width: var(--aside-right-width);
+}
+body aside.relative_content .relative_box {
+	padding: var(--gap-unit);
+	width: fit-content;
+	border: 1px solid lightgrey;
+}
+body aside.relative_content .box_name {
+	border-bottom: 1px solid lightgrey;
+	padding-bottom: var(--gap-unit);
+}
+body aside.relative_content .relative_box > * {
+	margin-bottom: var(--gap-unit);
 }
 
 /*FOOTER*/
 body footer.page_footer {
-	height: 100px;
+	margin: auto;
 	border-top: 1px solid lightgrey;
 }