diff --git a/visual_console/src/items/Clock/Clock.css b/visual_console/src/items/Clock/Clock.css
new file mode 100644
index 0000000000..cfa6f11eb5
--- /dev/null
+++ b/visual_console/src/items/Clock/Clock.css
@@ -0,0 +1,48 @@
+@font-face {
+  font-family: Alarm Clock;
+  src: url(./alarm-clock.ttf);
+}
+
+/* Digital clock */
+
+.visual-console-item .digital-clock {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  justify-items: center;
+  align-content: center;
+  align-items: center;
+}
+
+.visual-console-item .digital-clock > span {
+  font-family: "Alarm Clock", "Courier New", Courier, monospace;
+  font-size: 50px;
+
+  /* To improve legibility */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
+}
+
+.visual-console-item .digital-clock > span.date {
+  font-size: 25px;
+}
+
+.visual-console-item .digital-clock > span.timezone {
+  font-size: 25px;
+}
+
+/* Analog clock */
+
+.visual-console-item .analogic-clock .hour-hand {
+  animation: rotate-hour 43200s infinite linear;
+}
+
+.visual-console-item .analogic-clock .minute-hand {
+  animation: rotate-minute 3600s infinite linear;
+}
+
+.visual-console-item .analogic-clock .second-hand {
+  animation: rotate-second 60s infinite linear;
+}
diff --git a/visual_console/src/items/Clock.spec.ts b/visual_console/src/items/Clock/Clock.spec.ts
similarity index 93%
rename from visual_console/src/items/Clock.spec.ts
rename to visual_console/src/items/Clock/Clock.spec.ts
index cc35ef2a5e..a2a027bad8 100644
--- a/visual_console/src/items/Clock.spec.ts
+++ b/visual_console/src/items/Clock/Clock.spec.ts
@@ -1,4 +1,4 @@
-import Clock, { clockPropsDecoder } from "./Clock";
+import Clock, { clockPropsDecoder } from ".";
 
 const genericRawProps = {
   id: 1,
@@ -24,7 +24,9 @@ const digitalClockProps = {
   clockType: "digital",
   clockFormat: "datetime",
   clockTimezone: "Madrid",
-  clockTimezoneOffset: 60
+  clockTimezoneOffset: 60,
+  showClockTimezone: true,
+  color: "white"
 };
 
 const linkedModuleProps = {
diff --git a/visual_console/static/alarm-clock.ttf b/visual_console/src/items/Clock/alarm-clock.ttf
similarity index 100%
rename from visual_console/static/alarm-clock.ttf
rename to visual_console/src/items/Clock/alarm-clock.ttf
diff --git a/visual_console/src/items/Clock.ts b/visual_console/src/items/Clock/index.ts
similarity index 94%
rename from visual_console/src/items/Clock.ts
rename to visual_console/src/items/Clock/index.ts
index 0c5ab43428..15380f0151 100644
--- a/visual_console/src/items/Clock.ts
+++ b/visual_console/src/items/Clock/index.ts
@@ -1,17 +1,20 @@
-import { LinkedVisualConsoleProps, UnknownObject } from "../types";
+import "./Clock.css";
+
+import { LinkedVisualConsoleProps, UnknownObject } from "../../types";
 
 import {
   linkedVCPropsDecoder,
   parseIntOr,
   padLeft,
-  parseBoolean
-} from "../lib";
+  parseBoolean,
+  prefixedCssRules
+} from "../../lib";
 
 import VisualConsoleItem, {
   VisualConsoleItemProps,
   itemBasePropsDecoder,
   VisualConsoleItemType
-} from "../VisualConsoleItem";
+} from "../../VisualConsoleItem";
 
 export type ClockProps = {
   type: VisualConsoleItemType.CLOCK;
@@ -417,26 +420,44 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
       <style>
         @keyframes rotate-hour {
           from {
-            transform: translate(50px, 50px) rotate(${hourAngle}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${hourAngle}deg)`
+            ).join("\n")}
           }
           to {
-            transform: translate(50px, 50px) rotate(${hourAngle + 360}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${hourAngle + 360}deg)`
+            ).join("\n")}
           }
         }
         @keyframes rotate-minute {
           from {
-            transform: translate(50px, 50px) rotate(${minuteAngle}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${minuteAngle}deg)`
+            ).join("\n")}
           }
           to {
-            transform: translate(50px, 50px) rotate(${minuteAngle + 360}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${minuteAngle + 360}deg)`
+            ).join("\n")}
           }
         }
         @keyframes rotate-second {
           from {
-            transform: translate(50px, 50px) rotate(${secAngle}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${secAngle}deg)`
+            ).join("\n")}
           }
           to {
-            transform: translate(50px, 50px) rotate(${secAngle + 360}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${minuteAngle + 360}deg)`
+            ).join("\n")}
           }
         }
       </style>