diff --git a/static/CSS/OurSpaces.css b/static/CSS/OurSpaces.css
new file mode 100644
index 0000000000000000000000000000000000000000..5f6cb74365bdce3871e0c9090d9cec61c8565611
--- /dev/null
+++ b/static/CSS/OurSpaces.css
@@ -0,0 +1,40 @@
+header{
+ background-color: black;
+ display: block;
+ color: black;
+ margin-left: auto;
+ margin-right: inherit;
+ width: 100%;
+ height: 75%;
+ float: center;
+ text-align: center;
+margin: auto;
+
+}
+body{
+ background-color: #212529;
+ font-family: 'Sora', sans-serif;
+}
+
+#ImageBox{
+ border: 2px solid #0b634d;
+ padding: 5px;
+ width: 400px;
+ height: 300px;
+ text-align: center;
+ margin: auto;
+ float: center;
+ background-color:red;
+
+}
+
+.DescriptionBox{
+ border: 2px solid #0b634d;
+ padding: 5px;
+ width: 400px;
+ height: 300px;
+ text-align: center;
+ margin: auto;
+ float: center;
+ background-color:red;
+}
diff --git a/templates/OurSpaces.html b/templates/OurSpaces.html
index 8da549fbb37b545948a0d7293770715444ea992d..2a90e17d5dcc7d42cb238f2ab41d5f1db3444785 100644
--- a/templates/OurSpaces.html
+++ b/templates/OurSpaces.html
@@ -1,38 +1,40 @@
<head>
-<link rel="stylesheet" href="static/CSS/framework.css">
+<link rel="stylesheet" href="static/CSS/OurSpaces.css">
</head>
<body class="body">
-
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<header>
<h1>{% block titleBlock%} {%endblock%}</h1>
</header>
-<div class="Image box">
-<img src="{% block imageBlock%}{%endblock%}"width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
+<div id = "ImageBox"class="ImageBox">
+ <img src="{% block imageBlock%}{%endblock%}"width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</div>
-<div class="Description box">
+<div class="DescriptionBox">
<h2>About us</h2>
<h3>{% block descriptionBlock%} {%endblock%}</h3>
</div>
-<div class="Address box">
+<div class="AddressBox">
<h2>Address info</h2>
{% block addressBlock%}
{%endblock%}
</div>
-<div class="AddImage box">
+<div class="AddImageBox">
<img src="{% block addimageBlock%}{%endblock%}"width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</div>
-<div class="times box">
+<div class="timesBox">
<h2>When are we Open?</h2>
<h3>{% block timeBlock%} {%endblock%}</h3>
</div>
-<div class="Website box">
+<div class="WebsiteBox">
<h2><a href="{% block WebsiteBlock%}{%endblock%}">Get More Info</a><h2>
<h3></h3>
</div>