diff --git a/pinry-spa/src/components/Boards.vue b/pinry-spa/src/components/Boards.vue
index 2b73d12..1d4d4e1 100644
--- a/pinry-spa/src/components/Boards.vue
+++ b/pinry-spa/src/components/Boards.vue
@@ -171,8 +171,10 @@ export default {
 
 <style lang="scss" scoped>
 /* grid */
+@import 'utils/pin';
+
 .grid-sizer,
-.grid-item { width: 240px; }
+.grid-item { width: $pin-preview-width; }
 .grid-item {
   margin-bottom: 15px;
 }
diff --git a/pinry-spa/src/components/Pins.vue b/pinry-spa/src/components/Pins.vue
index 5f529c7..6937a3e 100644
--- a/pinry-spa/src/components/Pins.vue
+++ b/pinry-spa/src/components/Pins.vue
@@ -216,8 +216,10 @@ export default {
 
 <style lang="scss" scoped>
 /* grid */
+@import 'utils/pin';
+
 .grid-sizer,
-.grid-item { width: 240px; }
+.grid-item { width: $pin-preview-width; }
 .grid-item {
   margin-bottom: 15px;
 }
diff --git a/pinry-spa/src/components/utils/pin.scss b/pinry-spa/src/components/utils/pin.scss
new file mode 100644
index 0000000..67e65d6
--- /dev/null
+++ b/pinry-spa/src/components/utils/pin.scss
@@ -0,0 +1 @@
+$pin-preview-width: 240px;
\ No newline at end of file